How to send props to click handler - React JS

Question

I got two color circles below that when clicked the color of that clicked circle will update the bottom icon with the same color. Currently it's not working.

Is there a way to pass the addcolor props when clicked to the handleClick method below?

Thanks for any help!

class Color extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            colorMain: "#ff0200",
            colorBlue: "#1a3a69",
            colorWhite: "#f1f1f1",
            colorBlack: "#000000",
            colorPink: "#faaea5"
        };
    }

    handleClick = () => {
        this.setState({colorMain: this.props.addcolor})
    }

    render() {

        return (
                <div>                    
                    <div className="ColorPopover" data-test="ColorPopover">
                        <div className="ColorSwatchItem" data-test="ColorSwatchItem">
                            <div className="ColorSwatch" data-test="ColorSwatch">
                                <div className="ColorCircle">
                                    <svg width="28" height="28" x="0" y="0" viewBox="0 0 28 28" fill="#1a3a69" stroke-opacity="0.15">
                                    <g stroke="rgb(64, 64, 64)" stroke-width="2" stroke-opacity="0.15" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
                                        <circle onClick={this.handleClick} addcolor="#1a3a69" fill={this.state.colorBlue} cx="14" cy="14" r="13"></circle>
                                    </g>
                                    </svg>
                                </div>
                            </div>
                        </div>

                        <div className="ColorSwatchItem" data-test="ColorSwatchItem">
                            <div className="ColorSwatch" data-test="ColorSwatch">
                                <div className="ColorCircle">
                                    <svg width="28" height="28" x="0" y="0" viewBox="0 0 28 28" fill="#1a3a69" stroke-opacity="0.15">
                                    <g stroke="rgb(64, 64, 64)" stroke-width="2" stroke-opacity="0.15" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
                                        <circle onClick={this.handleClick} addcolor="#f1f1f1" fill={this.state.colorWhite} cx="14" cy="14" r="13"></circle>
                                    </g>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>

                <div className="icons">
                    <span class="f11">
                        <span class="">
                            <svg color={this.state.colorMain} aria-hidden="true" data-prefix="fas" data-icon="skull" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-skull fa-w-16 fa-fw"><path fill="currentColor" d="M256 0C114.6 0 0 100.3 0 224c0 70.1 36.9 132.6 94.5 173.7 9.6 6.9 15.2 18.1 13.5 29.9l-9.4 66.2c-1.4 9.6 6 18.2 15.7 18.2H192v-56c0-4.4 3.6-8 8-8h16c4.4 0 8 3.6 8 8v56h64v-56c0-4.4 3.6-8 8-8h16c4.4 0 8 3.6 8 8v56h77.7c9.7 0 17.1-8.6 15.7-18.2l-9.4-66.2c-1.7-11.7 3.8-23 13.5-29.9C475.1 356.6 512 294.1 512 224 512 100.3 397.4 0 256 0zm-96 320c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64zm192 0c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z" class=""></path></svg>
                        </span>
                    </span>
                </div>


                </div>
        )

    }
}

Answer 1

check below working example.

 class App extends React.Component { constructor(props) { super(props); this.state = { colorMain: "#ff0200", colorBlue: "#1a3a69", colorWhite: "#f1f1f1", colorBlack: "#000000", colorPink: "#faaea5" }; this.handleClick = this.handleClick.bind(this); } handleClick(color) { //console.log('e', e); this.setState({colorMain: color}) } render() { return ( <div> <div className="ColorPopover" data-test="ColorPopover"> <div className="ColorSwatchItem" data-test="ColorSwatchItem"> <div className="ColorSwatch" data-test="ColorSwatch"> <div className="ColorCircle"> <svg width="28" height="28" x="0" y="0" viewBox="0 0 28 28" fill="#1a3a69" stroke-opacity="0.15"> <g stroke="rgb(64, 64, 64)" stroke-width="2" stroke-opacity="0.15" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"> <circle onClick={() => {this.handleClick('"#1a3a69'); }} addcolor="#1a3a69" fill={this.state.colorBlue} cx="14" cy="14" r="13"></circle> </g> </svg> </div> </div> </div> <div className="ColorSwatchItem" data-test="ColorSwatchItem"> <div className="ColorSwatch" data-test="ColorSwatch"> <div className="ColorCircle"> <svg width="28" height="28" x="0" y="0" viewBox="0 0 28 28" fill="#1a3a69" stroke-opacity="0.15"> <g stroke="rgb(64, 64, 64)" stroke-width="2" stroke-opacity="0.15" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"> <circle onClick={() => {this.handleClick('#f1f1f1'); }} addcolor="#f1f1f1" fill={this.state.colorWhite} cx="14" cy="14" r="13"></circle> </g> </svg> </div> </div> </div> </div> <div className="icons"> <span class="f11"> <span class=""> <svg color={this.state.colorMain} aria-hidden="true" data-prefix="fas" data-icon="skull" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-skull fa-w-16 fa-fw"><path fill="currentColor" d="M256 0C114.6 0 0 100.3 0 224c0 70.1 36.9 132.6 94.5 173.7 9.6 6.9 15.2 18.1 13.5 29.9l-9.4 66.2c-1.4 9.6 6 18.2 15.7 18.2H192v-56c0-4.4 3.6-8 8-8h16c4.4 0 8 3.6 8 8v56h64v-56c0-4.4 3.6-8 8-8h16c4.4 0 8 3.6 8 8v56h77.7c9.7 0 17.1-8.6 15.7-18.2l-9.4-66.2c-1.7-11.7 3.8-23 13.5-29.9C475.1 356.6 512 294.1 512 224 512 100.3 397.4 0 256 0zm-96 320c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64zm192 0c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z" class=""></path></svg> </span> </span> </div> </div> ) } } ReactDOM.render(<App />, document.getElementById('root')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='root'></div> 

Answer 2

Try this little correction to the code that through the method bind, it passes from context to the method of the click, the current object, because the context changes normatively, so in this way forces you to have in context "this" of your class.

class Color extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        colorMain: "#ff0200",
        colorBlue: "#1a3a69",
        colorWhite: "#f1f1f1",
        colorBlack: "#000000",
        colorPink: "#faaea5"
    };
}

handleClick = () => {
    this.setState({colorMain: this.props.addcolor})
}

render() {

    return (
            <div>                    
                <div className="ColorPopover" data-test="ColorPopover">
                    <div className="ColorSwatchItem" data-test="ColorSwatchItem">
                        <div className="ColorSwatch" data-test="ColorSwatch">
                            <div className="ColorCircle">
                                <svg width="28" height="28" x="0" y="0" viewBox="0 0 28 28" fill="#1a3a69" stroke-opacity="0.15">
                                <g stroke="rgb(64, 64, 64)" stroke-width="2" stroke-opacity="0.15" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
                                    <circle onClick={this.handleClick.bind(this)} addcolor="#1a3a69" fill={this.state.colorBlue} cx="14" cy="14" r="13"></circle>
                                </g>
                                </svg>
                            </div>
                        </div>
                    </div>

                    <div className="ColorSwatchItem" data-test="ColorSwatchItem">
                        <div className="ColorSwatch" data-test="ColorSwatch">
                            <div className="ColorCircle">
                                <svg width="28" height="28" x="0" y="0" viewBox="0 0 28 28" fill="#1a3a69" stroke-opacity="0.15">
                                <g stroke="rgb(64, 64, 64)" stroke-width="2" stroke-opacity="0.15" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
                                    <circle onClick={this.handleClick} addcolor="#f1f1f1" fill={this.state.colorWhite} cx="14" cy="14" r="13"></circle>
                                </g>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>

            <div className="icons">
                <span class="f11">
                    <span class="">
                        <svg color={this.state.colorMain} aria-hidden="true" data-prefix="fas" data-icon="skull" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-skull fa-w-16 fa-fw"><path fill="currentColor" d="M256 0C114.6 0 0 100.3 0 224c0 70.1 36.9 132.6 94.5 173.7 9.6 6.9 15.2 18.1 13.5 29.9l-9.4 66.2c-1.4 9.6 6 18.2 15.7 18.2H192v-56c0-4.4 3.6-8 8-8h16c4.4 0 8 3.6 8 8v56h64v-56c0-4.4 3.6-8 8-8h16c4.4 0 8 3.6 8 8v56h77.7c9.7 0 17.1-8.6 15.7-18.2l-9.4-66.2c-1.7-11.7 3.8-23 13.5-29.9C475.1 356.6 512 294.1 512 224 512 100.3 397.4 0 256 0zm-96 320c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64zm192 0c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z" class=""></path></svg>
                    </span>
                </span>
            </div>


            </div>
    )

}

}

Answer 3

addcolor="#1a3a69" is not a prop you can read/use from this component scope - it would be available as prop inside <circle /> - not needed here, you have to pass parameter to handler

after reading passing parameters to handlers in react

and handler binding options you can write sth like:

handleClick = (color) => {
    this.setState({colorMain: color})
}

<circle onClick={this.handleClick('"#1a3a69')} fill={this.state.colorBlue} cx="14" cy="14" r="13"></circle>

colorMain can be a parameter, too

handleClick = (statePropName, color) => {
  this.setState({ [statePropName]: color})
}