Реакция - передача состояния в качестве реквизита другому компоненту

Question

Я пытаюсь сделать условный рендер на основе логина пользователя. У меня есть компонент Login, который передается через хук имени пользователя и пароля через customerLogin и setCustomerLogin:

function App() {

    const [customerLogin, setCustomerLogin] = useState([
        { username: "", password: "" }
    ]);

    return(
        <div className="App">
            <Navbar />
            <Switch>
                <Route path='/signup' component={Signup}/>                    
                <Route 
                    path='/login' 
                    render={() =>
                        <Login
                            customerLogin={customerLogin}
                            setCustomerLogin={setCustomerLogin}
                        />}
                    />
            </Switch>
        </div>
    );
}

Я хотел бы сделать условный рендер, основанный на том, является ли customerLogin пустой строкой, если пользовательвошел в систему, и customerLogin будет установлен на их имя пользователя. У меня есть два компонента SignedInLinks и SignedOutLinks, для которых я хотел бы использовать рендеринг в моем компоненте Navbar:

const Navbar = () => {
    return (
        <nav className="nav-wrapper">
            <div className="container">
                <Link to='/' className="brand-logo left">Cars4U</Link>
                    <SignedOutLinks />             
            </div>
        </nav>
    )
};

export default Navbar

Answer 1

Хм. Самое простое решение, которое я могу придумать для atm, это передать логическое значение в ваш Navbar компонент.

<Navbar isLoggedIn={!!customerLogin} />

Затем в вашем компоненте Navbar,

export const Navbar = ({ isLoggedIn }) => {
  return (
    <div className="container">
      {isLoggedIn ? <SignedInLinks /> : <SignedOutLinks />}
    </div>
  )
}