title: How React pass props from api to component?
body: <p>I have a parentA and childB component
  I want it click a button in parentA
  then execute function to get data from api
  then show on B component. that seems simple.</p>
  <p><strong>parent:</strong></p>
  <pre><code>  let profileData = {
      avatar: '',
      first_name: 'hey',
       ...
    };
  
  const handleClickProfileOpen = () =&gt; {
    setIsProfileOpen(true);
     getProfileData();
  };
  
    const getProfileData = async() =&gt; {
      let res;
      try {
        res = await....;
        if (res.code === 200) {
          profileData = res.data.data;
          ...
        } else {
          ...
        }
      } catch...
    };
  
  return (
   &lt;&gt;
    &lt;UserInfo openProfilePage={ handleClickProfileOpen } /&gt;
    &lt;Profile profileData={profileData} /&gt;
   &lt;/&gt;
  )
  </code></pre>
  <p><strong>child(profile)</strong></p>
  <pre><code>export default function Profile({profileData}) {
   return (
    &lt;&gt;
      &lt;p&gt;{profileData.first_name}&lt;/p&gt;
    &lt;/&gt;
  )}
  </code></pre>
  <p>and I run it, the profileData is not re-render when called API, the last_name is always 'hey',
  I tried setState in getProfileData code === 200, but cause error</p>
  <blockquote>
  <blockquote>
  <blockquote>
  <p>Can't perform a React state update on an unmounted component.</p>
  </blockquote>
  </blockquote>
  </blockquote>
  <p>I'm a new react programer, if you answer, I appreciate it.</p>