REACT onclick change color of div-CodePudding

I am trying to change each div's color onClick. The problem in my code is that all divs change color when one is clicked. Looking for a way to change each one's color individually

Here is my code :

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>
    );
}

output

CodePudding user response：

You have to create separate component for each div with changeable colour. This way each component will have its own independently managed state. In your example, you share same color state as the rest.

BoxComponent

class BoxComponent extends React.Component {
    state = {
        color: "blue",
    };

    onChange = () => {
        this.setState({ color: "red" });
    };

    render() {
        return (
            <div
                style={{ backgroundColor: this.state.color, width: 20, height: 20, opacity: "50%" }}
                onClick={this.onChange}
            />
        );
    }
}

MainComponent

class Main extends React.PureComponent {
    render() {
        return (
            <Box sx={SX.root}>
                <Box sx={SX.page}>
                    <Box sx={SX.shapeContainer}>
                        <BoxComponent />
                        <BoxComponent />
                    </Box>
                    <MathGrid sx={SX.math1} />
                </Box>

                <Box sx={SX.header} />
                <Box sx={SX.footer} />
            </Box>
        );
    }
}

CodePudding user response：

Both divs are using the “color” state value. You’ll need to use two separate pieces of state to manage the color of these two divs independently.

You’ll also need to either add another onChange handler, or modify the existing one to accept a color as an argument.

CodePudding user response：

You are using the same state for both boxes so when you change your state - its going to change across the whole component. You will need to make separate states for each component. or create a separate component for the box

<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}
                    />

CodePudding user response：

Put your state variable like ${this.state.color} in backtick.

<div style={{ backgroundColor: this.state.color , width: 20, height: 20, opacity: "50%" }} onClick={this.onChange}></div>