My goal is to change the color of each div individually when clicked. However, I am facing an issue where all divs change color at once when only one is clicked. I need help in modifying my code to achieve the desired behavior.
Below is the current implementation:
class Main extends React.PureComponent {
state = {
color: 'blue',
};
onChange = () => {
this.setState({color: 'red'});
};
render() {
return (
<Box sx={SX.root}>
<Box sx={SX.page}>
<Box sx={SX.shapeContainer}>
<div
style={{backgroundColor: this.state.color, width: 20, height: 20, opacity: '50%'}}
onClick={this.onChange}
/>
<div
style={{backgroundColor: this.state.color, width: 20, height: 20, opacity: '50%'}}
onClick={this.onChange}
/>
</Box>
<MathGrid sx={SX.math1} />
</Box>
<Box sx={SX.header} />
<Box sx={SX.footer} />
</Box>
);
}