Things get more interesting when we start working with conditionals, for example, if we want to render some components only when certain conditions are matched. The fact that we can use JavaScript in our conditions is a big plus, but there are many different ways to express conditions in JSX, and it is important to understand the benefits and problems of each one of these to write code that is both readable and maintainable.
Suppose we want to show a logout button only if the user is currently logged into our application.
A simple snippet to start with is as follows:
let button; if (isLoggedIn) { button = <LogoutButton />; } return <div>{button}</div>;
This works, but it is not very readable, especially if there are multiple ...
