Conditional rendering

Now that you know how to create and modify reactive states, we're going to learn how to use them to display certain elements only when necessary.

Imagine an application that displays a welcome message only when the user is logged in, or a button only if a certain action is available.

This is what's called conditional rendering, and with React, it's very easy!

It's impossible to use an if

In React, you can't directly use an if statement in the JSX return:

return (
  <div>
    {
		  if (isLoggedIn) {
		    <p>Bienvenue !</p>
		  } else {
		    <p>Connectez-vous !</p>
		  }
    }
  </div>
);

❌ Error