passing mapped data from an api to another component

Question

so i have data that i get from an api in componentDidMount, and then i map over it in the render. lets say the map returns 4 objects. How do i create a button click event that captures that specific objects data, and passes it along a route to another component?

code:


clickEvent(){
???
}

this.example = this.state.data.slice(1).map((data, key) =>

<div key={item.Id}>
<div>{data.dataIWantToPass}</div>
<Link to='/next_component_path' onClick={clickEvent}}>Click</Link>
</div>

So lets say the above returns 4 objects. I want the third one, when the link is clicked to pass its data.

Does this help you? - https://stackoverflow.com/questions/30115324/pass-props-in-link-react-router — Karin C, Jun 13 '19 at 10:41
1/2 yes. Passing the data as a param along the route is good. How do i access that data from the specific object would be the other 1/2. — Josh Winters, Jun 13 '19 at 10:54
You have two very simple examples here: https://stackoverflow.com/a/44860918/9220122 — Karin C, Jun 13 '19 at 12:45
Possible duplicate of [Pass props in Link react-router](https://stackoverflow.com/questions/30115324/pass-props-in-link-react-router) — Karin C, Jun 13 '19 at 13:09

shivangi rajde · Answer 1 · 2019-06-13T11:47:23.440


clickEvent(dataUWantToPass){
    <NewComponent dataPassed={dataUWantToPass} />
}

this.example = this.state.data.slice(1).map((data, key) =>
    <div key={data.Id}>
        <div>{data.dataIWantToPass}</div>

        //Link is a react-router-dom component, this helps you to redirect to other component (to which you have added the route for
        <Link to='/next_component_path'>                        
            <button onClick={()=>this.clickEvent(data.dataIWantToPass)} value="Click"/>
        </Link>
    </div>
))

You can receive the data in the NewComponent as props. If you want to check than you can write the componentWillReceiveProps() method in the NewComponent as:

componentWillReceiveProps(reveivedProps){
    console.log(reveivedProps);
}

the above just renders the component inside the link tag? I use components as pages, so the data I want to send is being sent to a new component(page). — Josh Winters, Jun 13 '19 at 11:09

score 0 · Accepted Answer · answered Jun 13 '19 at 12:07

Ok, I have solved this by piecing together various bits from comments, so thank you for your contributions. This is how it was resolved:

On the link tag i did this:

<Link to={{ pathname: '/path', query:{passed_id: data.id} }}></Link>

Then on the component that the path routes to:

this.setState({passed_id: this.props.location.query.passed_id});

And that gave me access to the data i was passing, in this case an ID. Now I just need to figure out how to compare that ID, with the looped data I also pass (via local storage), and map over it. Another question i suppose.

Konstantin · Answer 3 · 2019-06-13T10:33:58.617

-1

You need to use redux. This allows you to store data in global application store, and get the data from any component which is subscribed to the store. Today almost every react project needs redux to manage the data across the application

edited Jun 13 '19 at 10:33

answered Jun 13 '19 at 10:32

Konstantin

129
4
16

While I agree, lets use localStorage and state for now. What i am looking for, is how do i target that specific objects data, so that I can store it somewhere. – Josh Winters Jun 13 '19 at 10:33
Well, yes if you have only a few cases in your app with managing data across components, localStorage is a good choice. However, if you've got a complicated project, redux is necessary. How to use localStorage, you can use google, its simple – Konstantin Jun 13 '19 at 10:35

passing mapped data from an api to another component

3 Answers3