Change color of <td> independetly in react js

Question

I have three <td> inside a table. I want to change color of the <td> independently. onClick , a Modal pops up and you can select the color. Right now , when I set the color on state, all the <td> change their background color. I want to change the color of each <td> independently. So one <td> might have red, other <td> will have green and other <td> will have yellow .

 state = { visible: false, color: "", text: ""  };
     showModal = () => {
    this.setState({
      visible: true
    });
  };
     boxes1 = (value, text) => {
        console.log("dssdf", value);
        this.setState(
          {
            color: value,
            text: text
          },
          () => console.log("this is wt", this.state.color)
        );
      };

      boxes2 = (value, text) => {
        console.log("vf", value);
        this.setState(
          {
            color: value,
            text: text
          },
          () => console.log("this is wt", this.state.color)
        );
      };

      boxes3 = (value, text) => {
        console.log("sds", value);
        this.setState(
          {
            color: value,
            text: text
          },
          () => console.log("this is wt", this.state.color)
        );
      };

     render() {
        const yellow = "yellow";
        const blue = "blue";
        const reenter code hered = "red";
        const text = "colors";

        let s = [1, 2, 3];

        let d = s.map(tables => (
          <div>
            <table
              style={{
                border: "1px solid black",
                width: "70px",
                background: `${this.state.color}`
              }}
            >
              <thead>
                <tr>
                  <td onClick={this.showModal}>{this.state.text}Change 
                   colors
                  </td>
                </tr>
              </thead>
            </table>
          </div>
        ));
     return (
          <div>
            {d}
            <Modal
              title="Basic Modal"
              visible={this.state.visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
            >
              <div className="boxes" onClick={()=>this.boxes1(yellow,text)}>
               YELLOW
              </div>
              <div className="boxes" onClick={() => this.boxes2(red,text)}>
               RED
              </div>
              <div className="boxes" onClick={() => this.boxes3(blue,text)}>
               BLUE
              </div>
            </Modal>
          </div>
        );
      }
    }

Expected : When clicked on a single <td> the background color should update only for that <td> update.

Actual: When clicked, the background color for all the <td> is changed

Answer 1

Suggestion for dynamic style render based on index of element :

Assuming that you have rendered multiple element below is just an example to apply dynamic style to element based on index of element which is clicked that particular element style can be changed :

Pseudo code :

const myStyleBackgroundColor = {};

allElementArray.map((item,index)=>
<div onClick={(e)=>onClickHandle(index)} style={{backgroundColor : myStyleBackgroundColor[index] ? myStyleBackgroundColor[index] : "#FFF" }}>
This is the div which will change color once clicked based on index
</div>
);

onClickHandle(index){
myStyleBackgroundColor [index] = "color";
// apply rest of index a default color
}

Note : Above constant can be a variable array in local state also.

Answer 2

We must have multiple item to represent multiple div element else it will be fail as yours i.e, changing all div color.
Following is the code:

state = { box1: {visible: false, color: "", text: ""},
box2: {visible: false, color: "", text: ""},
box3: {visible: false, color: "", text: ""},  };

     showModal = () => {
    this.setState({
      visible: true
    });
  };
   boxesChange = (value, text, id) => {
    const box={
            color: value,
            text: text
          };        
    this.setState(
          `${id}`:box,
          () => console.log("this is wt", this.state.color)
        );
      };

     render() {
        const yellow = "yellow";
        const blue = "blue";
        const reenter code hered = "red";
        const text = "colors";

        let s = [1, 2, 3];

        let d = s.map(tables => (
          <div>
            <table
              style={{
                border: "1px solid black",
                width: "70px",
                background: `${this.state.color}`
              }}
            >
              <thead>
                <tr>
                  <td onClick={this.showModal}>{this.state.text}Change 
                   colors
                  </td>
                </tr>
              </thead>
            </table>
          </div>
        ));
     return (
          <div>
            {d}
            <Modal
              title="Basic Modal"
              visible={this.state.visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
            >
              <div id="box1" className="boxes" onClick={()=>this.boxes1(yellow,text,id)}>
               YELLOW
              </div>
              <div id="box2" className="boxes" onClick={() => this.boxes2(red,text,id)}>
               RED
              </div>
              <div id="box3" className="boxes" onClick={() => this.boxes3(blue,text,id)}>
               BLUE
              </div>
            </Modal>
          </div>
        );
      }
    }