title: How to import components in React and edit them (Change their State)
body: <p>I'm trying to convert paragraph into inputs for users to edit their information. Basically when the user clicks a button the paragraphs become inputs. I would like to do this in a separate component if it's possible. This is what I have so far:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import EditUser from &quot;./EditUser&quot;;
  
  const UserList = () =&gt; {
  const [userApi, setUserApi] = useState([]);
  const [getData, setGetData] = useState([]);
  
  useEffect(() =&gt; {
  fetch(&quot;http://user/api/getEndpoint&quot;)
    .then((getData) =&gt; getData.json())
    .then((json_result) =&gt; {
      setGetData(json_result.results);
      let userApi = showData(json_result.results);
      setUserApi(userApi);
    });
   }, []);
  
  const showData = (getData) =&gt; {
  return getData.map((item, key) =&gt; {
    return (
          &lt;div className=&quot;body&quot;&gt;
            &lt;div key={key}&gt;
              &lt;img
                className=&quot;circle&quot;
                src={item.picture.large}
                alt=&quot;&quot;
              /&gt;
              &lt;div className=&quot;list&quot;&gt;
                &lt;h5 className=&quot;title&quot;&gt;
                  {item.name.first} {item.name.last}
                &lt;/h5&gt;
                &lt;p className=&quot;text&quot;&gt;{item.email}&lt;/p&gt;
                &lt;p className=&quot;text&quot;&gt;{item.phone}&lt;/p&gt;
                &lt;p className=&quot;text&quot;&gt;
                  {item.location.city}, {item.location.state}
                &lt;/p&gt;
              &lt;/div&gt;
              &lt;hr /&gt;
              &lt;div&gt;
                &lt;EditUser /&gt; //Import other component as a button 
                               to edit changes for the paragraphs above.
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          );
        });
       };
  
  export default UserList;
  </code></pre>
  <p>And be able to edit the paragraph on this component:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  
  function EditUser() {
  
  const [user, editUser] = useState([]);
  
   return (
     &lt;div&gt;
       &lt;button
         className=&quot;button&quot;
         onClick={() =&gt; editUser([])} //Convert paragraph from 
                                        userList to inputs for editing. 
       &gt;
       Edit User
       &lt;/button&gt;
     &lt;/div&gt;
   );
  }
  
   export default EditUser;
  </code></pre>
  <p>Thanks for the help!</p>