Child to parent communication in React (JSX) without flux

Question

I\'m really new to React, and I\'m pulling my hair out trying to solve what seems to me to be a simple problem. Here\'s a picture of the component I\'ve built.

Color

Answer 1

The callback function should work. As you've mentioned in your previous comment you can use your captured this to access the updateColor function from the child:

var passTarget = this;
...
...
return 

Or as Bogdan mentioned you can pass it through map after your callback function:

{colorsArray.map(function(object, i){
  return ;
}, this)}

Your component should then be able to run a simple onClick function:

onClick={this.props.update}

And then you can simply make use of normal event targets in the parent component to capture the color of the button that was clicked:

updateColor: function(e) {
  console.log(e.target.style.backgroundColor);
}

Here is a full DEMO to demonstrate.