1

What is the correct approach of passing data that is received from database as props to another component? I was to send customer.id and customer.name as props to another component.

How can I send those data using button click in edit address function?

Here is my code:

const CustomerAddress = (props) => {
  const history = useHistory()
  useEffect(() => {
    axios({
      method: 'GET',
      url: 'http://localhost:8080/customer/showAddress/',
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('token'),
      },
    })
      .then((response) => {
        console.log(response.data)
        setData(response.data)
        setisLoaded(true)
      })
      .catch((error) => {
        console.log(error)
      })
  }, [])

  const [data, setData] = useState([])
  const [isloaded, setisLoaded] = useState(false)

  const editAddress = () => {
    history.push('/UpdateAddress')
  }

  let customer = null
  if (isloaded) {
    customer = data.map((customer1) => (
      <div>
        {customer1.id} {customer.name}
        <button
          className="btn btn-primary"
          onClick={() => editAddress(customer1.id)}
        >
          Delete
        </button>
      </div>
    ))
  }

  return <div> {customer} </div>
}
Ajeet Shah
  • 18,551
  • 8
  • 57
  • 87
user5474425
  • 115
  • 1
  • 9

2 Answers2

1

You can pass location-state data to the component using history.push:

onClick:

<button
  className="btn btn-primary"
  onClick={() => editAddress(customer1.id, customer1.name)}
>
  Delete
</button>

editAddress:

const editAddress = (customerId, customerName) => {
  history.push('/UpdateAddress', {
    customerId,
    customerName,
  })
}

or 

const editAddress = (customerId, customerName) => {
  history.push({
    pathname: '/UpdateAddress',
    state: {
      customerId,
      customerName,
    },
  })
}

And in the UpdateAddress Component, to get the data:

const customerId = this.props.history.location.state?.customerId
const customerName = this.props.history.location.state?.customerName

Read more: react-router and history

Ajeet Shah
  • 18,551
  • 8
  • 57
  • 87
  • Thank you so much but can you tell me in this.props.history.location.state?.customerId what does this "?" used for ? – user5474425 Jun 06 '20 at 20:13
  • `?.` is [Optional Chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining). It is a recent addition to the JS language. `const id = data && data.id` is same as `const id = data?.id`. Aslo, see [this](https://github.com/tc39/proposal-optional-chaining). – Ajeet Shah Jun 06 '20 at 20:16
  • @user5474425 There is one more way to send data to other component using `history.push` and that is using `params`, so your URL looks like `/UpdateAddress/data1/data2` and you can grab those params from the `history` object. You can refer this [answer](https://stackoverflow.com/a/62055813/2873538). But if you don't want to show the data in URL, you should go with `state` (above answer). – Ajeet Shah Jun 06 '20 at 20:49
0

You can set the id and name to the state variable ,then pass to the component.

<Customer customerId={customerId} customerName={customerName} />

You can access the value from props of the child component

If the component is siblings of the existing component you can sent value to the parent and then send back to the required node.

If you have a nested structure of components use Redux

If you want to send the data to parent when clicking the button,

<Child getData={(data)=>{ 
      // data is the value from the child
      // Statements to execute
}} />

In child when clicking button , You can pass the data to parent

this.props.getData(DATA_TO_SEND)
``
Abhijith v
  • 354
  • 5
  • 7