Child-to-parent transfer in reagent (JSX) without flow

Question

I'm really new to React, and I am pulling my hair out trying to solve what seems like a simple problem to me. Here is an image of the component that I built.

Color picker

What I'm trying to accomplish seems trivial, but literally every article I read explaining what to do told me something different, and none of the solutions worked. This violates this: when a user clicks on a tag, he creates a tray and iterates over an array of colors to create colored buttons. When you click the color button, you need to transfer the color that was pressed on its parent component, and run the function to update the color. I read about flux, event bubbling, tying "this" to a property, and none of these solutions seemed to work. React docs are mostly useless for beginners like me. I want to avoid complex event structures such as a thread at this point, as I am adding some simple components to an existing application that I did not write in React initially.

Also, PS, this code is in JSX, which makes much more sense to me than direct JS. Thanks in advance for your help!

var colorsArray = ["#ED5851", "#9CCC64", "#337AEC", "#ff7a45", "#7E58C2", "#FFEB3B", "#78909C", "#FFFFFF", "#213a4b"]; var EditDrawer = React.createClass({ updateColor: function() { console.log("New Color: " + i); }, render: function(){ var passTarget = this; return ( <div className="container-fluid animated fadeIn extra-fast-animation tag-edit-drawer"> <div className="row"> <div className="col-xs-12"> {colorsArray.map(function(object, i){ return <ColorButton buttonColor={object} key={i} />; })} </div> </div> </div> ); } }) var ColorButton = React.createClass({ render: function(){ var buttonStyle = { backgroundColor: this.props.buttonColor, }; return ( <div className="tag-edit-color-button" style={buttonStyle} > </div> ) } }) 

Answer 1

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

 var passTarget = this; ... ... return <ColorButton buttonColor={object} key={i} update={passTarget.updateColor} /> 

Or, as Bogdan said, you can pass it through the card after your callback function:

 {colorsArray.map(function(object, i){ return <ColorButton buttonColor={object} key={i} update={this.updateColor} />; }, this)} 

Then your <ColorButton /> component should be able to run a simple onClick function:

 onClick={this.props.update} 

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

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

Below is the full DEMO .

Answer 2

You can simply pass the callback function to the child from your parent component as simple as this:

  <ColorButton buttonColor={object} key={i} onColorSelect={this.updateColor}/> 

(when using React.createClass, all class methods are already bound to this , so you do not need to call .bind(this) ).

Then from the ColorButton component ColorButton you can call this callback like this.props.onColorSelect(...) .

JS Bin example: http://jsbin.com/fivesorume/edit?js,output

Answer 3

OK, it’s quite simple in React , without using flux or redux , similar to transferring props from parent to child, here we can use the callback do the following:

 var colorsArray = ["#ED5851", "#9CCC64", "#337AEC", "#ff7a45", "#7E58C2", "#FFEB3B", "#78909C", "#FFFFFF", "#213a4b"]; var EditDrawer = React.createClass({ updateColor: function(i) { alert("New Color: " + i); }, render: function(){ return ( <div className="container-fluid animated fadeIn extra-fast-animation tag-edit-drawer"> <div className="row"> <div className="col-xs-12"> {colorsArray.map(function(object, i){ return <ColorButton buttonColor={object} key={i} updateColor={this.updateColor}/>; }, this)} </div> </div> </div> ); } }); var ColorButton = React.createClass({ updateColor: function() { this.props.updateColor(this.props.buttonColor); }, render: function(){ var buttonStyle = { backgroundColor: this.props.buttonColor, }; return ( <div className="tag-edit-color-button" style={buttonStyle} onClick={this.updateColor}> this.props.buttonColor </div> ) } });