Conditional rendering

Question 1

Conditional rendering

Answer 1

In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.

Question 2

How does conditional rendering work in React?

Answer 2

Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them.

Question 3

Element variables

Answer 3

You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn’t change.
This will render either or depending on its current state:

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 = ;
    } else {
      button = ;
    }

return (
  <div>

        {button}
      </div>
    );
  }
}

Question 4

Inline If with Logical && Operator

Answer 4

You may embed expressions in JSX by wrapping them in curly braces. This includes the JavaScript logical && operator. It can be handy for conditionally including an element:

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

It works because in JavaScript, true && expression always evaluates to expression, and false && expression always evaluates to false. Therefore, if the condition is true, the element right after && will appear in the output. If it is false, React will ignore and skip it.

Note that returning a falsy expression will still cause the element after && to be skipped but will return the falsy expression.

Question 5

Inline If-Else with Conditional Operator

Answer 5

Another method for conditionally rendering elements inline is to use the JavaScript conditional operator condition ? true : false.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

It can also be used for larger expressions although it is less obvious what’s going on:

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn
        ? 
        : 
      }
    </div>
  );
}

Question 6

Preventing Component from Rendering

Answer 6

In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return null instead of its render output.

if (!props.warn) {
return null;
}

render() {
return (
<div>

      {this.state.showWarning ? 'Hide' : 'Show'}

  </div>
);   } }

Returning null from a component’s render method does not affect the firing of the component’s lifecycle methods. For instance componentDidUpdate will still be called.