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.
What I'm trying to accomplish seems trivial, but literally every article I've read explaining what to do has told me something different, and not one of the solutions has worked. It breaks down to this: When a user clicks on a tag, it builds out a tray and loops through an array of colors to build color buttons. When a color button is clicked it needs to pass which color was clicked to its parent component and run a function to update its color. I've read about flux, event bubbling, binding this to a property, and none of those solutions has seemed to work. The React docs are basically useless for a newbie like myself. I want to avoid complicated event structures like flux at this point since I'm appending some simple components to an existing app that I didn't write in React originally.
Also, PS, This code is in JSX which makes much more sense to me than straight JS react. 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>
)
}
})
