Динамически изменять заголовок NavDropdown в React, используя bootstrap

Question

Я создал раскрывающееся меню с React Bootstrap с заголовком «ВОЙТИ». Я хочу динамически изменить заголовок на SIGN OUT, когда пользователь вошел в систему. У меня уже написан код авторизации firebase, но я просто хочу изменить заголовок.

Вот мой компонент Home, который содержит NavBar :

import React from 'react'
import {Navbar,NavDropdown, Nav } from 'react-bootstrap'
import SignIn from './SignIn'


class Home extends React.Component{
    render(){
        return(
            <div>
                <Navbar collapseOnSelect expand="lg" bg="light" >
                    <Navbar.Brand href="/">Home Page</Navbar.Brand>
                    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                    <Navbar.Collapse id="responsive-navbar-nav">
                        <Nav className="mr-auto">
                        <Nav.Link href="#features">Home</Nav.Link>
                        <Nav.Link href="#pricing">About Us</Nav.Link>
                        <NavDropdown title="Products" id="collasible-nav-dropdown">
                            <NavDropdown.Item href="#action/3.1">1</NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.2">2</NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.3">3</NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.3">4</NavDropdown.Item>
                        </NavDropdown>
                        <Nav.Link href="#pricing">Contact</Nav.Link>
                        <Nav.Link href="#pricing">Shop</Nav.Link>

                        </Nav>
                        <Nav>
                        <NavDropdown title="SIGN IN" id="collasible-nav-dropdown">
                            <NavDropdown.Item href="SignIn">User</NavDropdown.Item>
                            <NavDropdown.Item href="AdminSignIn">Admin</NavDropdown.Item>
                        </NavDropdown>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            </div>
        )
    }
}



export default Home

Answer 1

Вам нужно использовать состояние. Когда состояние меняется, происходит повторная визуализация.

Что-то вроде

const [signedIn, setSignedIn] = useState(false);
let titleHere = signedIn? 'Sign Out': 'Sign In';

Затем

<NavDropdown.Item onClick={(e: any) => {setSignedIn(true)}}>{titleHere}</NavDropdown.Item>

Когда событие запускается, состояние изменяется, и происходит повторный рендеринг.