title: ReactJS while passing function from parent to child and accessing parent state not returning completely
body: <p>I was trying to access Parent state when a function is called from Child component, for that created a function in Parent component and passed it to Child, issue is I am not able to access the state completely.
  for example on button click I add a new input field and a delete button, suppose I added 10 input fields, and added all of them in state array, but when i click delete button of second input field, the count I get from state is 1, similar if I click 5th delete button i get count as 4 and it only show me 4 items in state, but it has 10 items
  Here is an example link <a href="https://codesandbox.io/s/add-react-component-onclick-forked-t2i0ll?file=/src/index.js:0-869" rel="nofollow noreferrer">https://codesandbox.io/s/add-react-component-onclick-forked-t2i0ll?file=/src/index.js:0-869</a></p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  
  const Input = ({ deleteRow, position }) =&gt; {
    const handleDelete = () =&gt; deleteRow(position);
    return (
      &lt;&gt;
        &lt;input placeholder=&quot;Your input here&quot; /&gt;
        &lt;button onClick={handleDelete}&gt;Delete&lt;/button&gt;
      &lt;/&gt;
    );
  };
  
  const Form = () =&gt; {
    const [inputList, setInputList] = useState([]);
  
    const onDeleteRow = (position) =&gt; {
      console.log(&quot;inputCount&quot;, inputList);
    };
    const onAddBtnClick = (event) =&gt; {
      setInputList(
        inputList.concat(
          &lt;Input
            key={inputList.length}
            position={inputList.length}
            deleteRow={onDeleteRow}
          /&gt;
        )
      );
    };
  
    return (
      &lt;div&gt;
        &lt;button onClick={onAddBtnClick}&gt;Add input&lt;/button&gt;
        {inputList}
      &lt;/div&gt;
    );
  };
  
  ReactDOM.render(&lt;Form /&gt;, document.getElementById(&quot;form&quot;));
  </code></pre>