title: How to change as logout in navbar after successful login in react js?
body: <p>I am new to React js, I have tried to Build Login page in react js with navbar all went fine but when I have change the logout from login in navbar after successful login I was struck. I have tried multiple ways but none of the ways worked. Can anyone please help me solve my issue.</p>
  <p>Login.js</p>
  <pre><code>import React, { useState } from 'react';
  import { useNavigate } from 'react-router-dom';
  import '../App.css'
  import UserPage from './UserPage';
  
  function Login(props) {
  
      let navi = useNavigate();
      const [name, setName] = useState();
      const [password, setPassword] = useState();
      const [message, setMessage] = useState();
      const [loggedIn, setLoggedIn] = useState(0);
  
  
      const database = [
          {
              name: &quot;piranesh&quot;,
              password: &quot;12&quot;
          }
      ];
  
      function handleSubmit(event) {
          event.preventDefault();
          const userData = database.find((n) =&gt; n.name === name);
          if (userData) {
              if (userData.password === password) {
                  setLoggedIn(1);
                  navi('/userprofile');
              }
              else {
                  setMessage(&quot;Invalid username or Password&quot;);
              }
          }
          else {
              setMessage(&quot;Invalid username or Password&quot;);
          }
          setName(&quot;&quot;);
          setPassword(&quot;&quot;);
  
  
      }
      return (
          &lt;div style={{ paddingTop: &quot;150px&quot; }}&gt;
              &lt;h4&gt;Login&lt;/h4&gt;
              &lt;form onSubmit={handleSubmit}&gt;
                  &lt;h3&gt;{message}&lt;/h3&gt;
                  &lt;table className=&quot;center&quot;&gt;
                      &lt;tr&gt;
                          &lt;th&gt;&lt;label &gt;User Name : &lt;/label&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;input type=&quot;text&quot; name=&quot;name&quot; value={name} placeholder=&quot;Enter your user name&quot; onChange={(event) =&gt; setName(event.target.value)} /&gt;&lt;br /&gt;&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th&gt;&lt;label &gt;Password : &lt;/label&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;input type=&quot;password&quot; name=&quot;password&quot; value={password} placeholder=&quot;Enter your password&quot; onChange={(event) =&gt; setPassword(event.target.value)} /&gt;&lt;br /&gt;&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th&gt;&lt;button type=&quot;submit&quot;&gt;Log in&lt;/button&gt;&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/form&gt;
  
  
          &lt;/div&gt;
  
      );
  }
  
  export default Login;
  </code></pre>
  <p>Header.js</p>
  <pre><code>import React, { useState } from 'react';
  import { Link, BrowserRouter, Routes, Route } from 'react-router-dom';
  import Home from './Home';
  import About from './About';
  import Login from './Login';
  import UserPage from './UserPage';
  
  function Header(props) {
  
  
      return (
  
          &lt;div&gt;
  
              &lt;BrowserRouter&gt;
                  &lt;Link to=&quot;/&quot; style={{ paddingRight: '60px', paddingLeft: '950px' }}&gt;Home&lt;/Link&gt;
                  &lt;Link to=&quot;/about&quot; style={{ paddingRight: '60px' }}&gt;About&lt;/Link&gt;
                  &lt;Link to=&quot;/login&quot; style={{ paddingRight: '60px' }}&gt;Login&lt;/Link&gt;
  
                  &lt;Routes&gt;
                      &lt;Route path='/' element={&lt;Home /&gt;} /&gt;
                      &lt;Route path='/login' element={&lt;Login /&gt;} /&gt;
                      &lt;Route path='/about' element={&lt;About /&gt;} /&gt;
                      &lt;Route path='/userprofile' element={&lt;UserPage /&gt;} /&gt;
                  &lt;/Routes&gt;
              &lt;/BrowserRouter&gt;
          &lt;/div&gt;
  
  
      )
  };
  
  
  export default Header;
  </code></pre>
  <p>UserPage.js</p>
  <pre><code>import React from 'react';
  
  
  
  function UserPage(props) {
  
      return (
  
          &lt;div&gt;
              &lt;h1&gt;Hello this is User Page &lt;/h1&gt;
          &lt;/div&gt;
      )
  };
  
  export default UserPage;
  </code></pre>
  <p>App.js</p>
  <pre><code>import './App.css';
  import 'bootstrap/dist/css/bootstrap.min.css';
  import Header from './components/Header';
  
  
  function App() {
   
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Header /&gt;
      &lt;/div&gt;
    );
   
  }
  
  export default App;
  </code></pre>
  <p>Thanks</p>