Looking to create a button with 3 different states that handle click events and send values.
The states needed are:
- Non-favourite
- Favourite
- Uber-favourite
Attempted using this.state.count + 1 to represent the levels but faced challenges. Unsure if this is the best approach.
Utilizing const fill for CSS color value passed into the svg element.
Current implementation falls short as checked only has 2 states (on/off) instead of the required 3. Example code available on this codepen.
class Switch extends React.Component {
constructor ( props ) {
super( props );
this.state = {
checked: !!props.checked
};
}
handleClick(e) {
this.setState({
checked: !this.state.checked
});
}
render () {
const fill = this.state.checked ? "#E1E0DD" : "#999999";
return (
<button className="switch" onClick={this.handleClick.bind(this)} >
<svg width="100" height="100">
<g>
<path id="svg_2" d="m0,38l37,0l11,-38l11,38l37,0l-30,23l11,38l-30,-23l-30,23l11,-38l-30,-23l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill={fill} />
</g>
</svg>
</button>
);
}
}
const App = () => (
<div>
<Switch checked={ true } />
</div>
)
React.render( <App />, document.getElementById( "page" ) );