title: React: Update data variable of element by id
body: <p>Because of performance issues, for the faster running, I would like to refresh the cells of a grid one by one. I have successfully been able to change the design of these cells in the following way:</p>
  <pre><code>document.getElementById(`cell-${cell.row}-${cell.col}`).className =
        &quot;cell cell-isPlaced&quot;;
  </code></pre>
  <p>Each cell has a data variable <code>props.data.num</code> that I would like to refresh the same way, as I change its design. For some reason, the following code does not refresh the number on the grid (For easier understanding, each cell has the value of 0, that I want to change to 1):</p>
  <pre><code>document.getElementById(`cell-${cell.row}-${cell.col}`).num = 1;
  </code></pre>
  <p>Cell:</p>
  <pre><code>const Cell = (props) =&gt; {
    let cell = () =&gt; {
      return (
        &lt;div
          className={`cell ${getColor(props)}`}
          id={`cell-${props.data.row}-${props.data.col}`}
        &gt;
          {props.data.num}
        &lt;/div&gt;
      );
    };
    return cell();
  };
  
  export default Cell;
  </code></pre>
  <p>Can the data of an element be changed in such a way as I am trying to do? (In general, all cell's display the 0 num, there's no problem with that).</p>
  <p>Render of grid:</p>
  <pre><code>let grid = this.state.grid.map((row, index) =&gt; {
        return (
          &lt;div key={index} className=&quot;row&quot;&gt;
            {row.map((cell, cellIndex) =&gt; {
              return (
                &lt;Cell
                  key={cellIndex}
                  data={cell}
                /&gt;
              );
             })}
         &lt;/div&gt;
        );
      });
  </code></pre>
  <p>Data in a cell during initialization:</p>
  <pre><code> function createGrid(props) {
    let grid = [];
    for (let i = 0; i &lt; props.rows; i++) {
      grid.push([]);
      for (let j = 0; j &lt; props.columns; j++) {
        grid[i].push({
          row: i,
          col: j,
          num: 0,
        });
      }
    }
    return grid;
  }
  </code></pre>