title: How to correctly pass and modify state in NextJS?
body: <p>I'm doing a small project where I get data from the server, put it inside state, render some input fields for this state, modify it and then send back to the server upon submitting. The data is an array of objects.</p>
  <p>The problem is that I have a button to add an input row which works fine and then each input row has a button to remove the row. And this remove button doesn't seem to work correctly at all.</p>
  <p>I'm getting StaticProps in my index.js page:</p>
  <pre><code>import MainPage from &quot;../Components/MainPage/MainPage&quot;;
  const Index = ({ pageContent }) =&gt; {
      return (
          &lt;MainPage pageContent={pageContent}/&gt;
      )
  }
      
  export default Index;
      
  export async function getStaticProps(context) {
      const res = await fetch('http://xxx/api/', {method: 'GET'})
      const pageContent = await res.json()
      return {
          props: { pageContent },
      }
  }
  </code></pre>
  <p>Then inside the <em>MainPage</em> I put it inside state</p>
  <pre><code>const MainPage = ({ pageContent }) =&gt; {
          const [model, setModel] = useState(pageContent)
  </code></pre>
  <p>and pass both <em>model</em> and <em>setModel</em> down to the child component</p>
  <pre><code> &lt;Content model={model} setModel={setModel}/&gt;
  </code></pre>
  <p>In the child component I render some rows from the model, each having a button with this onClick:</p>
  <pre><code>const onMinusButtonClick = (e) =&gt; {
      const rowKey = e.target.id
      let newModel = JSON.parse(JSON.stringify(model))
      if (rowKey &gt; -1) {
          newModel.splice(rowKey, 1);
      }
      setModel(newModel)
  }
  </code></pre>
  <p>When I click on the button <em>console.log(model)</em> in the <em>MainPage</em> component shows correctly modified model, but visually it always removes the last row regardless of which row is actually being deleted. Say, I have 5 rows [1,2,3,4,5] and when I click remove button in the first one, the model is [2,3,4,5] which is correct, but visually I see [1,2,3,4] being rendered.</p>
  <p>I also tried setting <em>newModel</em> variable outside of the function and putting <em>setModel</em> inside a useEffect with <em>[newModel]</em> as a dependancy array, but it also works really strange, showing correct model in the console but not rendering any changes at all.</p>
  <p>I'm certain there is something wrong with the way I pass and modify data, but I can't quite get what exactly.</p>