title: onChange input value in map useState React Hooks
body: <p>I've problem with useState input values.</p>
  <p>What I got:</p>
  <pre><code>const [document, setDocument] = useState([
   {
      documentName: '',
      documentDate: '',
      documentInfo: '',
      documentContent: ''
    },
    {
      documentName: '',
      documentDate: '',
      documentInfo: '',
      documentContent: ''
    }
  ])
  
  
  return ({
      document.map((item, index) =&gt; {
      return (
        &lt;&gt;
          &lt;Grid item xs={3}&gt;
            &lt;label&gt;Typ dokumentu:&lt;/label&gt;
            &lt;SelectInput
              fullwidth
              onChange={(e) =&gt;
                setDocument({
                  ...document,
                  [e.target.name]: document.map((value, j) =&gt; {
                    if (index === j) value = e.target.value;
                    return value;
                  }),
                })
              }
              value={document.documentName}
              name=&quot;documentName&quot;
              register={register}
            /&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={1}&gt;
            &lt;label&gt;Sekcja:&lt;/label&gt;
            &lt;SelectInput
              fullwidth
              onChange={(e) =&gt;
                setDocument({
                  ...document,
                  [e.target.name]: document.map((value, j) =&gt; {
                    if (index === j) value = e.target.value;
                    return value;
                  }),
                })
              }
              value={document.documentDate}
              name=&quot;documentDate&quot;
              register={register}
            /&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={1}&gt;
            &lt;label&gt;Strefa:&lt;/label&gt;
            &lt;SelectInput
              fullwidth
              onChange={(e) =&gt;
                setDocument({
                  ...document,
                  [e.target.name]: document.map((value, j) =&gt; {
                    if (index === j) value = e.target.value;
                    return value;
                  }),
                })
              }
              value={document.documentInfo}
              name=&quot;documentInfo&quot;
            /&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={1}&gt;
            &lt;label&gt;SRS:&lt;/label&gt;
            &lt;SelectInput
              fullwidth
              onChange={(e) =&gt;
                setDocument({
                  ...document,
                  [e.target.name]: document.map((value, j) =&gt; {
                    if (index === j) value = e.target.value;
                    return value;
                  }),
                })
              }
              value={document.documentContent}
              name=&quot;documentContent&quot;
            /&gt;
          &lt;/Grid&gt;
        &lt;/&gt;
      );
    });
  }
  )
  </code></pre>
  <p>What I want ? When I change for example documentName in second document then I've got:</p>
  <pre><code>[
  {
   documentName:'',
   documentDate:'',
   documentInfo:'',
   documentContent:''
  },
  {
   documentName:'DOCUMENTEXAMPLENAME',
   documentDate:'',
   documentInfo:'',
   documentContent:''
  }
  ]
  </code></pre>
  <p>I cant construct onChange function where I set this data in way which i described above.</p>
  <p>I try to use handleChange method where:</p>
  <pre><code>  const handleChange = (e,index) =&gt; {
          const items = [...document]
          items[index][e.target.name] = e.target.value
          setDocument(items)
      }
  </code></pre>
  <p>But then this change proper value but in everyone of object.</p>
  <p>Please help me !!</p>