Back to React Notes
Topic #20

React JSX If Statements

JSX has no if statement of its own, so conditionals are expressed with ternaries, logical && and helper functions. This is how you render different UI per state.

React Notes · Coding Now Tech Institute1 min readSource

Conditions - if statements

React supports if statements, but not inside JSX.

To be able to use conditional statements in JSX, you should put the if statements outside of the JSX, or you could use a ternary expression instead:

Option 1:

Write if statements outside of the JSX code:

Example

function Fruit() {
  const x = 5;
  let y = "Apple";
  if (x < 10) {
    y = "Banana";
  }

  return (
    <h1>{y}</h1>
  );
}

Option 2:

Use ternary expressions instead:

Example

function Fruit() {
  const x = 5;
  return (
    <h1>{(x) < 10 ? "Banana" : "Apple"}</h1>
  );
}

Note: that in order to embed a JavaScript expression inside JSX, the JavaScript must be wrapped with curly braces, {}.

PreviousReact JSX Attributes Next React Components

Want to go beyond the notes?

Join Coding Now Tech Institute's React course — live mentorship, real projects, and 100% placement support.

Enroll Now — Free Demo Available

React JSX If Statements – FAQs

Quick answers about learning React JSX If Statements in React.

What does this React JSX If Statements note cover?

This free note from Coding Now Tech Institute explains React JSX If Statements in React — concept, syntax and worked code examples you can copy, run and revise before interviews.

Is this React JSX If Statements tutorial free?

Yes. Every React topic on Coding Now Tech Institute, including React JSX If Statements, is 100% free with no signup required.

How long does it take to learn React JSX If Statements?

With focused practice, most students grasp React JSX If Statements in 1–3 days from these notes; pairing it with Coding Now Tech Institute's mentor-led course takes you to job-ready depth faster.

Where can I practise React JSX If Statements after reading?

Use the code examples in this note, then ask doubts for free on the Coding Now Tech Institute Community (/community) — expert instructors answer within 24 hours.