If else In JSX

By onjsdev

Apr 4th, 2024

JSX is a syntax extension to JavaScript that allows us to write HTML-like code in our JavaScript files. In this article, we will discuss how to use a if-else structure in JSX to achieve conditional rendering.

To achieve conditional rendering in JSX, you can utilize JavaScript expressions like the ternary operator or helper functions.

Using Ternary Operator for Inline Conditional Rendering

The ternary operator is a shorthand way of writing an if-else statement. It is represented by condition ? trueExpression : falseExpression.

For instance, to display a message based on a boolean condition isLoggedIn, you can use:

const isLoggedIn = true;

return (
    {isLoggedIn ? <div>Welcome!</div> : <div>Please log in</div>}

Helper Functions for Complex Conditional Logic

When conditional logic becomes more complex, using helper functions offers a cleaner and more maintainable approach. You can define a function that evaluates the condition and returns the appropriate JSX element.

function renderMessage(isLoggedIn) {
  if (isLoggedIn) {
    return <div>Welcome!</div>;
  } else {
    return <div>Please log in</div>;

return <div>{renderMessage(true)}</div>;


In this article, we have discussed how to use if else statements in JSX. In summary, if-else statements in JSX provide a concise way to conditionally render components based on specific criteria

Thank you for reading.