ReactJs Pass data between multiple components using Id field

Question

How can i pass Data from Main Component to child component based on the record Id. I have a index.js and detail.js pages. In the index page i have a link as <Link to={{ pathname:/cards/${results.id}, state: results }} className={card-wrapper restore-${results.id}}> {results.first_name} </Link> when i click on the link i want to send the data associated to that record /Id value of the link to the detail page and display.

Does this answer your question https://stackoverflow.com/questions/30115324/pass-props-in-link-react-router ? — Pushprajsinh Chudasama, Dec 03 '19 at 04:08
No @Vivek My only problem is replace `{cardData.data.Table[0].first_name}` by id of current record something like `{cardData.data.Table[i].first_name}` or `{cardData.data.Table[id].first_name}` — Rob, Dec 03 '19 at 04:30
using props send data to children is very complex so i would prefer to use redux here — kiran kumar, Dec 03 '19 at 04:37
@kiran i am newbie to both react and redux any similar example? — Rob, Dec 03 '19 at 05:39

jackthedev · Accepted Answer · 2019-12-03T06:25:15.423

Ok, I've examined your code and you need to do 2 changes: From your index.js file, you need to change your link's to prop to:

to={{ pathname: `/cards/${results.id}`, state: results }}

In your details.js, change your render function to:

render() {
    const id = this.props.match.params.id;
    const data = cardData.data.Table.find(item => item.id === id)
    return (
      // Card details compoment
      <div className="card-details">
        <h2>{data.first_name}</h2>
        <h2>{data.id}</h2>

        <Link
          to={{
            pathname: "/",
            state: this.props.location.state
          }}
        >
          <button>Return to list</button>
        </Link>
      </div>
    );
  }

Notice in the Link that you are linking to /cards/${results.id}, the id is the id of the record from the database.

Then in details.js,you find from the data a record with the id from the params and you use the data in that record.

You had done 2 mistakes:

You were linking to /cards/${results.index} in index.js, results.index is undefined.
In details.js, you were referencing data for example as:

cardData.data.Table[id].first_name

But cardData.data.Table is an array of Objects and the ids are properties of the objects. cardData.data.Table[id] would only return data for an id such as 1002 if that array had at least 1003 objects in it.

Working Perfect! you the best !!!! you save my life!!!!!!!!!!!! — Rob, Dec 03 '19 at 06:19
in my local i have id =1001 in sand box id="1001" how can i update the code? i am getting Cannot read property 'first_name' of undefined but i checked it all works Perfect!!!!. when i change id from 1001 to "1001" it works. your answer/solution is perfect need your help updating the code — Rob, Dec 03 '19 at 07:09
Am not sure where the difference in values is originating from with info you are providing but you can convert between strings and numbers using String and Number functions. Pass a string to Number and you get an integer - String(1001) should return "1001", Number("1001") should return 1001. I don't know if this helps. — jackthedev, Dec 03 '19 at 07:30
yep i changed to ` const data = cardData.data.Table.find(item => Number(item.id) === Number(id));` and all work Perfect!! — Rob, Dec 03 '19 at 07:42

score 0 · Answer 2 · answered Dec 03 '19 at 05:53

0

In this case, you can pass cardData.data.Table data to as props & get id from router like .....params.id.

Then replace cardData.data.Table[0] by cardData.data.Table[i].

answered Dec 03 '19 at 05:53

Pratap Tengale

77
3

Thank you for the reply, can you please make it clear? i am new to this react. i have my live code here https://codesandbox.io/s/lucid-booth-o0488?fontsize=14&hidenavigation=1&theme=dark – Rob Dec 03 '19 at 05:59

ReactJs Pass data between multiple components using Id field

2 Answers2