title: How to set the value of inputs with ReactJS hooks?
body: <p>I want to fill the inputs value of a form with default values once the modal is opened</p>
  
  <p>I did it with pure javascript using <code>document.getElementById(textId).value='some value</code> as follow:</p>
  
  <pre><code>  for(var i=0; i&lt;details_data.length;i++){
       let textId='text'+i;
       let amountId='amount'+i;
       document.getElementById(textId).value=details_data[i].text
    }
  </code></pre>
  
  <p>This worked fine. but I want to know how to do it with React since I don't believe this is a best practice.</p>
  
  <p>what i tried is to set the input value like this:</p>
  
  <pre><code>&lt;input name='text' id={textId} value={el.text} onChange={details_handler.bind(index)}/&gt;
  </code></pre>
  
  <p>But this woudn't let me change the value of the input. it just set the default value, and when i type in the input the value woudn't change as I want.</p>
  
  <p><strong>This is my code</strong></p>
  
  <pre><code>const [details_data,set_details_data]=useState([
      {'text':'','amount':''}
  ])
  // called this function on `onChange` and store the data in `details_data`
  function details_handler(e){
      let name=e.target.name;
      let value=e.target.value;
      details_data[this][name]=value;
      set_details_data(details_data);
    }
  </code></pre>
  
  <p><strong>JSX:</strong></p>
  
  <p>(In my case user can add inputs as many as he wants,That's why I put the inputs in a the mapping loop)</p>
  
  <pre><code>  {
      details_data.map((el,index) =&gt; {
          let textId='text'+index;
          let amountId='amount'+index;
          return (
              &lt;div key={index}&gt;
                  &lt;input name='text' id={textId} value={el.text} onChange={details_handler.bind(index)}/&gt;
                  &lt;input name='amount' id={amountId} onChange={details_handler.bind(index)}/&gt;
              &lt;/div&gt;
              );
        })
    }
  </code></pre>