title: Setting attributes on click in React JS
body: <p>I am trying to make it so when I click the elements I dynamically create below, they will change color.</p>
  <pre><code>  handleBuild() {
      const from = parseInt(document.getElementById(&quot;from&quot;).value);
      const to = parseInt(document.getElementById(&quot;to&quot;).value);
      let newSquares = [];
      for (let i = from; i &lt;= to; i = i + 0.5) {
        if (i.toString().includes(&quot;.&quot;)) {
          newSquares.push(i.toString().split(&quot;.&quot;, 1) + &quot;:30&quot;);
        } else {
          newSquares.push(i.toString());
        }
      }
      this.setState({ squares: newSquares });
    }
  
    render() {
      const items = this.state.squares.map((item) =&gt; (
        &lt;div
          name={item}
          onClick={() =&gt; this.handleColor}
          className=&quot;squares&quot;
          key={item}
        &gt;
          &lt;h4&gt;{item}&lt;/h4&gt;
        &lt;/div&gt;
      ));
  </code></pre>
  <p>I am wondering how my <code>handleColor</code> function should look? I have a state which I can use to change the color, but first I want to know how to change the color of a dynamically created DIV in react? What info should I pass to the function to select that DIV and alter its style properties when clicked?</p>
  <p>Thanks in advance</p>