title: State set method did not effect the main object - ReactJS
body: <p>I have three components in my project, <strong>App</strong>, <strong>DataTable</strong> and <strong>Table</strong>. </p>
  
  <p>The <strong>App</strong> will render a <strong>DataTable</strong> that contains the Table component. I just called DataTable with data and columns props in it.</p>
  
  <pre><code>// data sample
  const tmpData = [
      {
          name: "Can",
          age: 4,
      }, {
          name: "David",
          age: 44,
      }, {
          name: "Sara",
          age: 14,
      }, {
          name: "Hani",
          age: 24,
      }
  ]
  
  // main columns array
  const tmpColumns = [
      {
          title: "Name",
          accessor: "name",
      }, {
          title: "Age",
          accessor: "age",
      }
  ]
  
  function App() {
      return (
          &lt;div className="App" style={{background: "#f0f0f0", padding: "1rem"}}&gt;
              &lt;div&gt;App Component:&lt;/div&gt;
  
              &lt;DataTable data={tmpData} columns={tmpColumns}/&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p><strong>DataTable</strong> component is just for handling selection and filter actions on my table. So, it could manipulate the data and the columns. the Table will render in it and here is the code of <strong>DataTable</strong>.</p>
  
  <pre><code>function DataTable(props) {
  
      const [data, setData] = useState(props.data)
      const [columns, setColumns] = useState(props.columns)
  
      const [selection, setSelection] = useState([])
  
      useEffect(() =&gt; {
          // add select columns after component mount
          handleColumnChange()
      }, [])
  
      // listen to selection change
      useEffect(() =&gt; {
  
          // selection change log, It change on each select.
          console.log(selection);
      }, [selection])
  
      function handleRowSelect(rowName) {
  
          const keyIndex = selection.indexOf(rowName);
  
          console.log(selection, rowName, keyIndex);
  
          if (keyIndex === -1)
              setSelection(preSelection =&gt; ([...preSelection, ...[rowName]]))
          else
              setSelection(preSelection =&gt; preSelection.filter(sl =&gt; sl !== rowName))
  
      }
  
      function handleColumnChange() {
  
          // add select column if not added already
          if (!columns.find(col =&gt; col.accessor === 'select')) {
  
              setColumns([
                  ...[{
                      title: "Select",
                      accessor: "select",
                      // this method will execute to render checkbox on Select table
                      Cell: function (row) {
  
                          return &lt;input type="checkbox"
                                        onChange={() =&gt; handleRowSelect(row.name, selection)}
                                        checked={selection.includes(row.name)}/&gt;
                      },
                  }],
                  ...columns,
              ])
          }
      }
  
      return (
          &lt;div className="DataTable" style={{background: "#e0e0e0", padding: "1rem"}}&gt;
              &lt;div&gt;Data Table:&lt;/div&gt;
  
              &lt;Table {...{data, columns}}/&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p><strong>Table</strong> component will render columns and suitable data for them. For each column in columns array we have an item to access data (<code>accessor</code>) or an executable method to return custom data (<code>Cell</code>) and here is its code.</p>
  
  <pre><code>function Table(props) {
  
      const [data, setData] = useState(props.data)
  
      return (
          &lt;div className="Table" style={{background: "#d5d5d5", padding: "1rem"}}&gt;
              &lt;div&gt;Table&lt;/div&gt;
  
              &lt;table&gt;
                  &lt;tbody&gt;
                  &lt;tr&gt;
                      {props.columns.map((th, key) =&gt; (
                          &lt;th key={key}&gt;{th.title}&lt;/th&gt;
                      ))}
                  &lt;/tr&gt;
  
                  {/* generating data rows */}
                  {data.map((dr, key) =&gt; (
                      &lt;tr key={key}&gt;
                          {columns.map((col, index) =&gt; (
                              &lt;td key={index}&gt;
                                  {
                                      // the "Cell" method has high priority than "accessor" selector
                                      (col.Cell &amp;&amp; typeof col.Cell === "function") ?
                                          col.Cell(dr) :
                                          dr[col.accessor]
                                  }
                              &lt;/td&gt;
                          ))}
                      &lt;/tr&gt;
                  ))}
                  &lt;/tbody&gt;
              &lt;/table&gt;
  
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>As you saw above, to handle row selection I manipulate the columns in the <strong>DataTable</strong> component by adding a new column at first index of my columns array. Everything works fine for now. But, when I try to select a row, the Call methods of the select column, could not access the selection array state of my <strong>DataTable</strong> component. and it's my problem!</p>
  
  <p>Actually, on each select, the <code>selection</code> array must update and target checkbox must check. Apparently, there is a copy of the <code>selection</code> that changes (or maybe not changes).</p>
  
  <p>You also could check the whole project on <a href="https://codesandbox.io/s/data-table-nested-method-issue-brflg" rel="nofollow noreferrer">CodeSandbox</a></p>