StackUnderFlow
Reputation: 367
How to send props to click handler - React JS
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>
)
}
}
Upvotes: 0
Views: 143
Answers (3)
xadm
Reputation: 8418
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})
}
Upvotes: 0
Thilina Sampath
Reputation: 3775
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>Upvotes: 1
Oliver Valiente Oliva
Reputation: 1
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>
)
}
}
Upvotes: 0
Related Questions
- How can I pass on an on click event to a component via props?
- React get component prop on click
- React - passing component prop in click handlers passed as props
- Simplest way to add a click event to react component based on props
- Sending input value to click handler in React
- How to pass Props to reactjs handler?
- Add click event to render props?
- how to pass props to a component via onClick event?
- Pass argument to reactjs click handler
- React handleClick on component