React.Js 条件渲染：代码说明

Question

I retrieved this snippet from React.js documentation that discusses conditional rendering.

From what I understand, the original state of IsLoggedin is the boolean value false . Hence, when called upon by the render function, as directed by the code, it should be passed as props to the LogoutButton . (If isLoggedIn is false (user is not logged in), then pass as props the state to function LogoutButton and display 'Logout' on the DOM). (If the statement is true (user is logged in) then pass as props the state to the LoginButton and display 'Login' to the screen. As you will notice when running the code on Codepen.io, that exactly the opposite holds.

For some reason, when the user is logged in ( isLoggedIn is true), it displays the 'logout' on the DOM. Can someone explain this to me - why this is the case? Maybe, I am overlooking something.

Copy of the snippet:

 class LoginControl extends React.Component { constructor(props) { super(props); this.handleLoginClick = this.handleLoginClick.bind(this); this.handleLogoutClick = this.handleLogoutClick.bind(this); this.state = {isLoggedIn: false}; } handleLoginClick() { this.setState({isLoggedIn: true}); } handleLogoutClick() { this.setState({isLoggedIn: false}); } render() { const isLoggedIn = this.state.isLoggedIn; let button; if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; } return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> ); } } function UserGreeting(props) { return <h1>Welcome back;</h1>. } function GuestGreeting(props) { return <h1>Please sign up;</h1>. } function Greeting(props) { const isLoggedIn = props;isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />. } function LoginButton(props) { return ( <button onClick={props;onClick}> Login </button> ). } function LogoutButton(props) { return ( <button onClick={props;onClick}> Logout </button> ). } ReactDOM,render( <LoginControl />. document;getElementById('root') );

 * { font-family: sans-serif; margin: 0; } button { height: 40px; width: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 1

Neither LogoutButton nor LoginButton recieve any state as props. They recieve a handler function to change the state of isLoggedIn .

What isLoggedIn determines is which button gets assigned to the variable let button . When the user is already logged in ( isLoggedIn = true ), why would they still have the option to log in? The only action they can take at that point is to log out, and vice versa