React Conditional Rendering - Cheatsheet

react-conditional-rendering-cheatsheet.md

A: Element Variables (in your JavaScript)

function MyComponent(){

    let button;
    if (isLoggedIn) {
      button = <LogoutButton />;
    } else {
      button = <LoginButton />;
    }


    return (
      <div>
        {button}
      </div>
    );

}

B: Logical && Operator (in your JSX)

Example:

{errorMessage && <p>{errorMessage}</p>}

C: Ternary Operator (in your JSX)

Example 1:

{isLoggedIn
  ? <LogoutButton />
  : <LoginButton />
}

Example 2:

{recipes.length > 0 
  ? renderRecipes()
  : <p>Sorry, no recipes. Click here to create the first one!</p>
}