Conditional Render
Conditional rendering

  1. //index.html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. 	<meta charset="UTF-8">
  6. 	<title>Document</title>
  7. </head>
  8. <body>
  9. 	<div id = "root"></div>
  10. 	<script src="https://fb.me/react-0.14.3.js"></script>
  11. 	<script src="https://fb.me/react-dom-0.14.3.js"></script>
  12. 	<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
  13. 	<script src="script.js" type = "text/babel"></script>
  14. </body>
  15. </html>
  16. 		
  1. function UserGreeting(props) {
  2.   return <h1>Welcome back!</h1>;
  3. }
  4.  
  5. function GuestGreeting(props) {
  6.   return <h1>Please sign up.</h1>;
  7. }
  8.  
  9. function Greeting(props) {
  10.   const isLoggedIn = props.isLoggedIn;
  11.   if (isLoggedIn) {
  12.     return <UserGreeting />;
  13.   }
  14.   return <GuestGreeting />;
  15. }
  16.  
  17. ReactDOM.render(
  18.   // Try changing to isLoggedIn={true}:
  19.   <Greeting isLoggedIn={false} />,
  20.   document.getElementById('root')
  21. );
  22.  
  23.
Element Variables
  1. function UserGreeting(props) {
  2.   return <h1>Welcome back!</h1>;
  3. }
  4.  
  5. function GuestGreeting(props) {
  6.   return <h1>Please sign up.</h1>;
  7. }
  8.  
  9. function LoginButton(props) {
  10.   return (
  11.     <button onClick={props.onClick}>
  12.       Login
  13.     </button>
  14.   );
  15. }
  16.  
  17. function LogoutButton(props) {
  18.   return (
  19.     <button onClick={props.onClick}>
  20.       Logout
  21.     </button>
  22.   );
  23. }
  24.  
  25. function Greeting(props) {
  26.   const isLoggedIn = props.isLoggedIn;
  27.   if (isLoggedIn) {
  28.     return <UserGreeting />;
  29.   }
  30.   return <GuestGreeting />;
  31. }
  32.  
  33. class LoginControl extends React.Component {
  34.   constructor(props) {
  35.     super(props);
  36.     this.handleLoginClick = this.handleLoginClick.bind(this);
  37.     this.handleLogoutClick = this.handleLogoutClick.bind(this);
  38.     this.state = {isLoggedIn: false};
  39.   }
  40.  
  41.   handleLoginClick() {
  42.     this.setState({isLoggedIn: true});
  43.   }
  44.  
  45.   handleLogoutClick() {
  46.     this.setState({isLoggedIn: false});
  47.   }
  48.  
  49.   render() {
  50.     const isLoggedIn = this.state.isLoggedIn;
  51.     let button;
  52.  
  53.     if (isLoggedIn) {
  54.       button = <LogoutButton onClick={this.handleLogoutClick} />;
  55.     } else {
  56.       button = <LoginButton onClick={this.handleLoginClick} />;
  57.     }
  58.  
  59.     return (
  60.       <div>
  61.         <Greeting isLoggedIn={isLoggedIn} />
  62.         {button}
  63.       </div>
  64.     );
  65.   }
  66. }
  67.  
  68. ReactDOM.render(
  69.   <LoginControl />,
  70.   document.getElementById('root')
  71. );
  72.
Inline If with Logical && Operator
  • It works because in JavaScript, true && expression always evaluates to expression
  • and false && expression always evaluates to false
    1. function Mailbox(props) {
    2.   const unreadMessages = props.unreadMessages;
    3.   return (
    4.     <div>
    5.       <h1>Hello!</h1>
    6.       {unreadMessages.length > 0 &&
    7.         <h2>
    8.           You have {unreadMessages.length} unread messages.
    9.         </h2>
    10.       }
    11.     </div>
    12.   );
    13. }
    14.  
    15. const messages = ['React', 'Re: React', 'Re:Re: React'];
    16. ReactDOM.render(
    17.   <Mailbox unreadMessages={messages} />,
    18.   document.getElementById('root')
    19. );
    20. 		
    1. button = isLoggedIn ? (
    2.         <LogoutButton onClick={this.handleLogoutClick} />
    3.       ) : (
    4.         <LoginButton onClick={this.handleLoginClick} />
    5.       )
    6.
    Preventing Component from Rendering
  • return null instead of its render output
    1. function WarningBanner(props) {
    2.   if (!props.warn) {
    3.     return null;
    4.   }
    5.  
    6.   return (
    7.     <div className="warning">
    8.       Warning!
    9.     </div>
    10.   );
    11. }
    12.  
    13. class Page extends React.Component {
    14.   constructor(props) {
    15.     super(props);
    16.     this.state = {showWarning: true};
    17.     this.handleToggleClick = this.handleToggleClick.bind(this);
    18.   }
    19.  
    20.   handleToggleClick() {
    21.     this.setState(state => ({
    22.       showWarning: !state.showWarning
    23.     }));
    24.   }
    25.  
    26.   render() {
    27.     return (
    28.       <div>
    29.         <WarningBanner warn={this.state.showWarning} />
    30.         <button onClick={this.handleToggleClick}>
    31.           {this.state.showWarning ? 'Hide' : 'Show'}
    32.         </button>
    33.       </div>
    34.     );
    35.   }
    36. }
    37.  
    38. ReactDOM.render(
    39.   <Page />,
    40.   document.getElementById('root')
    41. );
    42.
    Reference
  • Getting Started at reactjs.org