React: Passing Information from Child to Parent while Mapping JSON Data
Jul 20, 2015 • Kevin Hou
I’ve had a lot of issues in the past week trying to figure out how to pass information from the child component to the parent component while mapping JSON data.
Here’s what it looks like to pass information from the child component to the parent component:
Here’s what it looks like to map a JSON object:
Unfortunately, it’s difficult to combine these two things because when using “this.handleClick”, “this” refers to the current object it is in. When you map data, “this” refers to contactNodes, not the component; therefore, you cannot refer to a function while mapping JSON data. I finally figured out a simple way around this issue. Instead of including all my HTML in the return while mapping, I used the map function to set states. Then I passed those states into the components in the regular render() function. This allowed me to use functions because the “this” would refer to the correct object.