title: Updating a state from another React component in ReactJS
body: <p>I have an api call in <strong>App.js</strong> component and I am getting the username from here to show this in the navbar. You can see the navbar component has the name property passed as a parameter to it. This is how my <strong>App.js</strong> code looks like</p>
  <pre><code>function App() {
  
    const[name,setName] = useState(null);
  
    useEffect(()=&gt; {
  
      (
          async () =&gt; {
            try{
              const res =  await fetch('https://localhost:44361/api/users/getuser', {
                  headers: {&quot;Content-Type&quot;: 'application/json;charset=UTF-8'},
                  credentials: 'include',
              });
              const content = await res.json();
              console.log(content);
              setName(content[0].uFirstName); // has to be content[0]
            }
            catch(e){
              console.log(e);
            }
          }
      )();
    },[name])
  return (
      
       &lt;Router&gt;
         &lt;div className=&quot;App&quot;&gt;
  
             &lt;Navbar name = {name}/&gt;
  
             &lt;Routes&gt;
  
              &lt;Route exact path=&quot;/&quot; element={ &lt;Home /&gt;} /&gt;
  
              &lt;Route path=&quot;/registration&quot; element = {&lt;Registration/&gt;} /&gt;
  
              &lt;Route path=&quot;/login&quot; element = {&lt;Login/&gt;} /&gt;
  
             &lt;/Routes&gt;
        &lt;/div&gt;
       &lt;/Router&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Now I want to update the name property from <strong>Login.js</strong> component. <strong>Login.js</strong> looks something like this:</p>
  <pre><code>function Login() {
      
      // const[name,setName] = useState(null);
      const[UEmail,setEmail] = useState(null);
      const[UPassword,setPassword] = useState(null);
      const[navigate, setNavigate] = useState(false);
  
      const submitHandler = async (e) =&gt; 
      {
          e.preventDefault(); // Prevent from being refreshed. Because User will not re-put every field if some field is wrong
          try{
              const res = await fetch('https://localhost:44361/api/users/login', {
                  method: 'POST',
                  headers: {&quot;Content-Type&quot;: 'application/json;charset=UTF-8'},
                  credentials: 'include',
                  body : JSON.stringify({
                      UEmail,
                      UPassword
                  })
              });
  
              var content = await res.json();
  
              if(res.status === 200)
              {
                    setNavigate(true);
                   //DO something
              }
  
              else if(res.status === 400){
                  //DO something
              }
              
          }catch(err){
              console.log(err);
          }
      }
      if(navigate) // REDIRECT TO LOGIN PAGE AFTER BEING SUCCESSFULLY REGISTERED
      {
          return &lt;Navigate to=&quot;/&quot;/&gt;
      }
      return (
          &lt;div className=&quot;fullContainer&quot;&gt;
              &lt;div className=&quot;base-container&quot;&gt;
                  &lt;div className=&quot;reg&quot;&gt;Login&lt;/div&gt;
                  &lt;div className=&quot;content&quot;&gt;
                      &lt;div className=&quot;form&quot;&gt;
                          &lt;div className=&quot;form-group&quot;&gt;
                          
                              &lt;input name=&quot;Email&quot; type=&quot;email&quot; placeholder=&quot;Email&quot; required
                              onChange={e =&gt; setEmail(e.target.value)}
                              /&gt;
                          &lt;/div&gt;
                          &lt;div className=&quot;form-group&quot;&gt;
                          
                              &lt;input name=&quot;Password&quot; type=&quot;password&quot; placeholder=&quot;Password&quot; required
                              onChange={e =&gt; setPassword(e.target.value)}
                              /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;footer&quot;&gt;
                      &lt;button onClick={submitHandler} type=&quot;button&quot; className=&quot;btn&quot;&gt;Login&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;toReg&quot;&gt;
                  &lt;p&gt;Don't have an account? 
                      &lt;Link to=&quot;/registration&quot;&gt;
                          &lt;a&gt; Register&lt;/a&gt;
                      &lt;/Link&gt;
                  &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
      )
  }
  
  export default Login
  </code></pre>
  <p>How can I update the name in App.js after user click the login button after putting all credentials. I want to do this because, after navigating the user to homepage when the status code is 200 the user name is not changing in navigation bar. I need to do another reload to see the correct username in navbar.</p>
  <p>Thank you.</p>