title: How can I delete and disable an input element?
body: <p>This is my App</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import Input from &quot;./components/Input&quot;;
  
  function App() {
    const [newRow, setNewRow] = useState([]);
    
    
    const addRow = (event) =&gt; {
      event.preventDefault();
      setNewRow(
        newRow.concat(&lt;Input key={newRow.length} myKey={newRow.length} /&gt;)
      );
    };
  
    return (
      &lt;div&gt;
        &lt;button onClick={addRow}&gt;Add row&lt;/button&gt;
        &lt;ul&gt;
          &lt;Input key={newRow.length} myKey={newRow.length}/&gt;
          {newRow}
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>And this is my Input component</p>
  <pre><code>import &quot;./Input.css&quot;;
  import React, { useState } from &quot;react&quot;;
  
  
  const Input = (props) =&gt; {
      const [updatedList, setUpdatedList] = useState([])
    const deleteRow = (event) =&gt; {
      event.preventDefault();
      const key = props.myKey;
      setUpdatedList(updatedList.splice(key, 1));
      console.log(updatedList);
    };
    const disableRow = (event) =&gt; {
      event.preventDefault();
    };
    return (
      &lt;li className=&quot;item&quot;&gt;
        &lt;select&gt;
          &lt;option value=&quot;+&quot;&gt;+&lt;/option&gt;
          &lt;option value=&quot;-&quot;&gt;-&lt;/option&gt;
        &lt;/select&gt;
        &lt;input type=&quot;text&quot; /&gt;
        &lt;button onClick={deleteRow}&gt;Delete&lt;/button&gt;
        &lt;button onClick={disableRow}&gt;Disable&lt;/button&gt;
      &lt;/li&gt;
    );
  };
  
  export default Input;
  </code></pre>
  <p>I guess I'm supposed to delete and disable the List HTML element through its key but I'm getting an empty array when I console.log(updatedList). So how can I delete from the original array in the parent component from the child component?</p>