title: Change color of <td> independetly in react js
body: <p>I have three <code>&lt;td&gt;</code> inside a table. I want to change color of the <code>&lt;td&gt;</code> independently. onClick , a Modal pops up and you can select the color. Right now , when I set the color on state, all the <code>&lt;td&gt;</code> change their background color. I want to change the color of each <code>&lt;td&gt;</code> independently. So one <code>&lt;td&gt;</code> might have red, other <code>&lt;td&gt;</code> will have green and other <code>&lt;td&gt;</code> will have yellow .</p>
  
  <pre><code> state = { visible: false, color: "", text: ""  };
       showModal = () =&gt; {
      this.setState({
        visible: true
      });
    };
       boxes1 = (value, text) =&gt; {
          console.log("dssdf", value);
          this.setState(
            {
              color: value,
              text: text
            },
            () =&gt; console.log("this is wt", this.state.color)
          );
        };
  
        boxes2 = (value, text) =&gt; {
          console.log("vf", value);
          this.setState(
            {
              color: value,
              text: text
            },
            () =&gt; console.log("this is wt", this.state.color)
          );
        };
  
        boxes3 = (value, text) =&gt; {
          console.log("sds", value);
          this.setState(
            {
              color: value,
              text: text
            },
            () =&gt; 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 =&gt; (
            &lt;div&gt;
              &lt;table
                style={{
                  border: "1px solid black",
                  width: "70px",
                  background: `${this.state.color}`
                }}
              &gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;td onClick={this.showModal}&gt;{this.state.text}Change 
                     colors
                    &lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
              &lt;/table&gt;
            &lt;/div&gt;
          ));
       return (
            &lt;div&gt;
              {d}
              &lt;Modal
                title="Basic Modal"
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
              &gt;
                &lt;div className="boxes" onClick={()=&gt;this.boxes1(yellow,text)}&gt;
                 YELLOW
                &lt;/div&gt;
                &lt;div className="boxes" onClick={() =&gt; this.boxes2(red,text)}&gt;
                 RED
                &lt;/div&gt;
                &lt;div className="boxes" onClick={() =&gt; this.boxes3(blue,text)}&gt;
                 BLUE
                &lt;/div&gt;
              &lt;/Modal&gt;
            &lt;/div&gt;
          );
        }
      }
  </code></pre>
  
  <p>Expected : When clicked on a single <code>&lt;td&gt;</code> the background color should update only for that <code>&lt;td&gt;</code> update.</p>
  
  <p>Actual: When clicked, the background color for all the <code>&lt;td&gt;</code> is changed</p>