ReactJs how to make that after cliclk button register will be not displayed

Question

Hello how to make after click button register it that hes will be hidden i try couple of methods its not working for me code below . Thanks.....................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

import React, { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';


const Navbar = () => {
    const navigate = useNavigate();

    const Logout = async () => {
        try {
            await axios.delete('http://localhost:5000/logout');
            navigate("/");
        } catch (error) {
            console.log(error);
        }
    }

    const [state,setState]=useState(false);  
    
    const toggle=() => {
        setState(!state);
    }
 

 


    return ( 
        <nav className="navbar is-light" role="navigation" aria-label="main navigation">
            <div className="container">
                <div className="navbar-brand">
                    <a className="navbar-item" href="https://bulma.io">
                        <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" alt="logo" />
                    </a>

                    <a href="/" role="button" className="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                    </a>
                </div>

                <div id="navbarBasicExample" className="navbar-menu">
                    <div className="navbar-start">
                        <a href="/" className="navbar-item">
                            Home
                        </a>
                    </div>

                    <div className="navbar-end">
                        <div className="navbar-item">
                            <div className="buttons">
                                <button onClick={Logout} className="button is-light">
                                    Log Out
                                </button>
                            </div>
                        </div>
                    </div>

                    <div className="navbar">
                        <div className="navbar-item">
                            <div className="buttons">
                                <button   onClick={() => {navigate('/register'); toggle();   }}  className="button is-light"> 
                                Register
                                </button> 
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </nav>
    )
    }

export default Navbar

Answer 1

You are navigating to 'register', so, assuming that the navbar does not unmount, i think that the best way is use the useLocation hook to check if the user is on this path, something like

///...
const location = useLocation();
return(
///....
   {
      location.pathname !== '/register' && (
         <button   onClick={() => {navigate('/register');  }}  className="button is-light"> 
                                Register
                                </button> 
      )
    }

Using the state approach:

//...
const [showRegisterButton, setShowRegisterButton] = useState(true)
return (
  //...
   
```{showRegisterButton && (<button   onClick={() => {navigate('/register'); setShowRegisterButton(false);   }}  className="button is-light"> 
                                Register
                                </button> 
)}

But, again, this is assuming that the navbar does not unmount when you do the navigate action