title: How persist data Table LocalStorage ReactJS Hooks
body: <p>Hi guys i have a small problem with my local storage to persist my state on my table,  i would like to save the data of each cell,  for example a key which identifying one and only one cell because for the moment only the first cell is saved when i refresh the page. do you have any idea or solution plz ? this is my code thank a lot :)</p>
  <p>this my component CellColor</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import styled from 'styled-components';
  
      const COLOR = styled.div`
         td {
         width: 150px;
            }
            `;
  
       const CellColor = () =&gt; {
           const darkgreen = '#4FA100';
           const lightgreen = '#88FF17';
           const pink = '#FF43D7';
           const orange = '#FFA419';
           const white = '#FFFFFF';
  
       const [cellColor, setCellColor] = useState({
         darkgreen,
         lightgreen,
         orange,
         pink,
       });
  
     const handleColor = () =&gt; {
  setCellColor(
    cellColor === white
      ? lightgreen
      : cellColor === lightgreen
      ? pink
      : cellColor === pink
      ? orange
      : cellColor === orange
      ? darkgreen
      : white
       );
      };
  
      useEffect(() =&gt; {
       const Data = localStorage.getItem('cell-data');
       setCellColor(JSON.parse(Data));
      }, []);
  
       useEffect(() =&gt; {
         localStorage.setItem('cell-data', JSON.stringify(cellColor));
        });
  
       return (
         &lt;COLOR className=&quot;cell-color&quot;&gt;
        &lt;td
            className=&quot;cell-click&quot;
             role=&quot;presentation&quot;
             style={{ backgroundColor: cellColor }}
            onClick={(e) =&gt; handleColor(e.target.style.backgroundColor)}
          /&gt;
         &lt;/COLOR&gt;
     );
   };
  
     export default CellColor;
  </code></pre>
  <p>so this is my table render</p>
  <pre><code> import React, { useContext } from 'react';
   import { Table } from 'react-bootstrap';
   import PrevContext from '../service/PrevContext';
   import './StylePlanning.css';
   import 'bootstrap/dist/css/bootstrap.min.css';
   import COLUMNS from './table-components/Columns';
   import DataCell from './table-components/DataCell';
  
   const TablePrev = () =&gt; {
      const { prevName } = useContext(PrevContext);
      const { firstname, lastname } = prevName;
  
       return (
  &lt;div className=&quot;block-planning-prev&quot;&gt;
    &lt;Table bordered style={{ color: 'navy', fontWeight: 'bold' }}&gt;
      &lt;thead&gt;
        &lt;tr className=&quot;row0&quot;&gt;
          &lt;td className=&quot;month-title&quot; colSpan=&quot;31&quot;&gt;
            &lt;input type=&quot;month&quot; /&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr className=&quot;row1&quot;&gt;
          &lt;td&gt;Preventeur&lt;/td&gt;
          {COLUMNS.map((ic) =&gt; (
            &lt;td key={ic.accessor} value={ic.Header}&gt;
              {ic.Header}
            &lt;/td&gt;
          ))}
        &lt;/tr&gt;
      &lt;/thead&gt;
      {prevName.map((i) =&gt; (
        &lt;tbody&gt;
          &lt;tr className=&quot;row0&quot;&gt;
            &lt;th
              key={i._id}
              value={(firstname, lastname)}
              className=&quot;column0&quot;
              rowSpan=&quot;2&quot;
            &gt;
              {i.firstname}
              {i.lastname}
            &lt;/th&gt;
            {DataCell.map((id) =&gt; (
              &lt;td key={id.key} value={(id.col, id.col1)} className=&quot;column1&quot;&gt;
                {id.col}
                {id.col1}
              &lt;/td&gt;
            ))}
          &lt;/tr&gt;
          &lt;tr className=&quot;row1&quot;&gt;
            {DataCell.map((item) =&gt; (
              &lt;td
                key={item.key}
                value={(item.col, item.col1)}
                className=&quot;column2&quot;
              &gt;
                {item.col}
                {item.col1}
              &lt;/td&gt;
            ))}
          &lt;/tr&gt;
        &lt;/tbody&gt;
      ))}
       &lt;/Table&gt;
     &lt;/div&gt;
     );
   };
     export default TablePrev;
  </code></pre>
  <p>and here my data file</p>
  <pre><code> import React from 'react';
   import CellColor from './CellColor';
   import CellData from './CellData';
  
      const DATA = [
       {
        col: &lt;CellColor /&gt;,
        col1: &lt;CellData /&gt;,
        key: '1',
      },
      {
        col: &lt;CellColor /&gt;,
        col1: &lt;CellData /&gt;,
        key: '2',
      },
      {
        col: &lt;CellColor /&gt;,
        col1: &lt;CellData /&gt;,
        key: '3',
      },
      {
        etc.
      ]
      export default DATA;
  </code></pre>