title: How to edit input value in React Js?
body: <p>I'm trying to create a component for my app, where when I click on a button input field opens, after I add text I click on that button again and another input opens up, and so on. Then e.target.value of all those inputs should be saved in a different state and displayed in another components. So far I was able to create such input, but I can't figure out how to edit input fields. My code:</p>
  <pre><code>import &quot;./styles.css&quot;;
  import React, { useState } from &quot;react&quot;;
  
  export default function App() {
    const [input, setInput] = useState([{}]);
    const [data, setData] = useState([]);
  
    function handleChange(i, e) {
      e.preventDefault();
  
      setInput([
        {
          id: i,
          value: e.target.value
        }
      ]);
    }
  
    function handleAddInput() {
      const values = [...input];
      values.push({ value: null });
      setInput(values);
    }
  
    const handleSave = () =&gt; {
      let value = input?.map((item) =&gt; {
        return item.value;
      });
      if (!value || /^\s*$/.test(value)) {
        return;
      }
  
      const newData = [...data, ...input];
  
      setData(newData);
  
      setInput([])
    };
  
    return (
        &lt;div className=&quot;App&quot;&gt;
          &lt;button type=&quot;button&quot; className=&quot;btn&quot; onClick={() =&gt; handleAddInput()}&gt;
            Add  Input fields
          &lt;/button&gt;
  
          {input?.map((input, idx) =&gt; {
            return (
              &lt;div key={input.id}&gt;
                &lt;input
                  type=&quot;text&quot;
                  placeholder=&quot;Enter text&quot;
                  onChange={(e) =&gt; handleChange(idx, e)}
                  value={input.value}
                /&gt;
              &lt;/div&gt;
            );
          })}
  
         
      
  &lt;h2&gt;Display Added Fields and Edit&lt;/h2&gt;
        {data?.map((item) =&gt; {
          return (
            &lt;&gt;
              &lt;input defaultValue={item.value}
              
              
              
              /&gt;
            &lt;/&gt;
          );
        })}
  
  &lt;button className=&quot;btn&quot; onClick={handleSave}&gt;Save&lt;/button&gt;
  
        {data?.map((item) =&gt; {
          return (
            &lt;div style={{ display: &quot;flex&quot;, flexDorection: &quot;column&quot;, marginTop:&quot;20px&quot; }}&gt;
              {item.value}
            &lt;/div&gt;
          );
        })}
          &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p><a href="https://codesandbox.io/s/serene-payne-m4t5e?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">codeSandbox</a></p>
  <p><a href="https://i.stack.imgur.com/rTJMD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rTJMD.png" alt="enter image description here" /></a></p>
  <p>At the moment when I click &quot;Add  Input fields&quot; new input pops up, I enter any input text, then I click Add  Input fields again and another input opens up, when I click &quot;Save&quot; button, all input values are saved to state (as data) and displayed as inputs, and after I can map through &quot;data&quot; and display received inputs. Like on image I added &quot;first&quot;, then &quot;second&quot; and they're getting displayed fine, but I don't know how I could edit them, for example change &quot;first&quot; to &quot;third&quot; and on Save button &quot;third&quot; should be displayed instead of &quot;first&quot;. Any help and suggestions are greatly appreciated.</p>