title: Trying to edit a dynamically created input field gets deleted
body: <p>I am creating a new input field onClick of a button. The default state of the input is readonly. However, I have an edit button near it to enable the field to be not readonly. When I click the button, the field gets deleted. Please advise.</p>
  <p>This is what I have.</p>
  <pre><code>  import React, { useReducer } from &quot;react&quot;;
    import &quot;./styles.css&quot;;
    import { get, uniqueId, cloneDeep, map } from &quot;lodash&quot;;
  
    const initialState = {
      fields: []
    };
  
    export default function App() {
  const [state, setState] = useReducer(
    (state, newState) =&gt; ({
      ...state,
      ...newState
    }),
    initialState
  );
  
  const handleEdit = (i) =&gt; {
    const fieldsListClone = cloneDeep(state.fields);
    const result = map(fieldsListClone, (item) =&gt; {
      if (item.id === i) {
        item.editable = true;
      }
      return item;
    });
  
    setState({
      fields: result
    });
  };
  
  const addNewField = () =&gt; {
    const numFields = state.fields.length + 1;
    const renderFieldInput = (i) =&gt; {
      const field = state.fields.find((item) =&gt; item.id === i);
      return (
        &lt;div key={uniqueId()} style={{ display: &quot;flex&quot; }}&gt;
          &lt;div style={{ border: &quot;1px solid red&quot;, marginRight: &quot;20px&quot; }}&gt;
            {i + 1}
          &lt;/div&gt;
          &lt;div&gt;
            &lt;input readOnly={!get(field, &quot;editable&quot;) || true} /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;button onClick={() =&gt; handleEdit(i)}&gt;Edit&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    };
    const fieldInputs = [];
    for (let i = 0; i &lt; numFields; i++) {
      fieldInputs.push({
        id: i,
        field: renderFieldInput(i),
        editable: false
      });
    }
    setState({
      fields: fieldInputs
    });
  };
  return (
    &lt;div className=&quot;App&quot;&gt;
      {state.fields.map((item) =&gt; (
        &lt;div key={uniqueId()}&gt;{item.field}&lt;/div&gt;
      ))}
      &lt;button onClick={addNewField}&gt;Add new field&lt;/button&gt;
    &lt;/div&gt;
  );
  </code></pre>
  <p>}</p>
  <p>This is my codesandbox <a href="https://codesandbox.io/s/condescending-joliot-4bzru?file=/src/App.js:0-1644" rel="nofollow noreferrer">link</a>.</p>
  <p>Is there a better way to create new form fields? My idea is to store all the properties of the field in a single state value including the editable field as well as the value field.</p>