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

OK, this is pretty simple in React without using flux or redux, similar to passing down props from parent to child, here we can use callback function like this:

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 (
            

                

                    

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


var ColorButton = React.createClass({
    updateColor: function() {
        this.props.updateColor(this.props.buttonColor);
    },
    render: function(){
        var buttonStyle = {
            backgroundColor: this.props.buttonColor,
        };
        return (
            

              this.props.buttonColor
            
        )
    }
});