title: Edit Form React JS
body: <p>I´m making an edit form with React js. I have multiple components in the form. In one of the son components, I pass all the changes that I`ve done to a hook in the main component to do the changes in firebase.</p>
  <p>Father Component</p>
  <pre><code>const [changes, setChanges] = useState({});
  const updateGenData = (genData) =&gt; {
      setChanges(genData);  
    }
  </code></pre>
  <p>Son Component(I take all the info from the father, via props)</p>
  <pre><code>const UpdateProfileGenData = (props) =&gt; {
  
   const [values, setValues] = useState({});
   const [changes, setChanges] = useState({});
  
   useEffect(() =&gt; {
      setValues(props);
   },[props]); 
  
   const {field1, field2, field3} = values;
  
   useEffect(() =&gt; {
      props.updateGenData(changes);
  },[changes]); 
  
    const handleChange= e =&gt; {
          setValues({
              ...values,
              [e.target.name]: e.target.value
          });
           setChanges({
            ...changes,
            [e.target.name]: e.target.value
        }) 
      }
  return (
  
  &lt;input type=&quot;text&quot; name=&quot;field1&quot; value={field1} onChange={handleChange}/&gt;
  &lt;input type=&quot;text&quot; name=&quot;field2&quot; value={field2} onChange={handleChange}/&gt;
  &lt;input type=&quot;text&quot; name=&quot;field3&quot; value={field3} onChange={handleChange}/&gt;
  
  );
  }
  export default UpdateProfileGenData;
  </code></pre>
  <p>When I pass the values ​​from the child component to the parent it doesn't allow me to edit the child form . I can´t change any field.</p>
  <p>Any suggestions??</p>
  <p>Regards</p>