React Developer - Lesson 1

Lesson 1 of 39

Conditional Rendering - And

Lesson Progress: 0%

Conditional Rendering - And

Lesson Incomplete

Lesson 1 of 39

Code Example

function Greeting() {
  const isLoggedIn = true;

  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please log in.</h1>;
  }
}

render(Greeting);

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript can choose what to show by checking if something is true or false.
The if (isLoggedIn) line checks whether the user is logged in.
If isLoggedIn is true, the code shows Welcome back!.
If it is false, the code shows Please log in. instead.

Code Example

function Message() {
  const hasNotification = true;

  return (
    <div>
      <h1>Dashboard</h1>
      {hasNotification && <p>You have a new notification.</p>}
    </div>
  );
}

render(<Message/>);

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript conditional rendering means the code can choose when to show something on the screen.
This component uses a function declaration because it starts with function Message().
A function expression and an arrow function can also make components, but this example uses the regular function style.
The && symbols mean “only show this if the value on the left is true.”
The line {hasNotification && You have a new notification.} shows the message only when hasNotification is true.

Code Example

const WelcomeMessage = function () {
  const isLoggedIn = true;

  return (
    <div>
      <h1>Home</h1>
      {isLoggedIn && <p>Welcome back!</p>}
    </div>
  );
};

render(<WelcomeMessage/>);

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript conditional rendering means the code can decide when to show something on the screen.
This example uses a function expression because the function is being stored in WelcomeMessage.
A function declaration starts with function Name(), but this one uses const WelcomeMessage = function ().
An arrow function can do a similar job too, but it uses a shorter style with =>.
The && symbols mean “show this only if the first part is true.”
The curly braces in {isLoggedIn && Welcome back!} are needed so JavaScript logic can work inside the JSX.

Code Example

const SaleBanner = function () {
  const hasDiscount = true;

  return (
    <section>
      <h2>Store</h2>
      {hasDiscount && <p>Today’s discount is available.</p>}
    </section>
  );
};

render(<SaleBanner/>);

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript conditional rendering means the code can choose when something should appear on the screen.
This example uses a function expression because the function is being saved inside SaleBanner.
A function declaration starts with function Name(), but this one starts with const SaleBanner = function ().
An arrow function is another way to write this, and it uses a shorter style with =>.
The && symbols mean “only show this if the part on the left is true.”
The curly braces in {hasDiscount && Today’s discount is available.} are needed so JavaScript can work inside the JSX.

Instructions

▼ ← Click the triangle to hide or reveal instructions.

A function declaration uses function Name(), but this example uses an arrow function with () =>.
A function expression stores a regular function in a variable, but an arrow function uses a shorter way to do that.
The && symbols can be used to show something only when a value is true.
The line {isLoggedIn && Welcome back!} shows the welcome message only when isLoggedIn is true.
The curly braces {} are needed so JavaScript logic can be written inside the JSX.

Instructions

▼ ← Click the triangle to hide or reveal instructions.

A function declaration uses function Name(), but this example uses an arrow function with () =>.
A function expression also saves a function in a variable, but an arrow function uses a shorter writing style.
The && symbols can be used to show something only when a value is true.
The line {hasError && There was an error submitting the form.} shows the error message only when hasError is true.
The curly braces {} are needed so JavaScript logic can be written inside the JSX.

Test Incomplete

Training Mode

Testing Mode

Random Order

What happens when the variable isLoggedIn is false in the line if (isLoggedIn) { ... }?

The code throws an error.The code shows Welcome back!The code shows Please log in.Nothing happens, and the block is skipped entirely regardless of content.

Question #

1/14

Score

0/0 - 0.0 %

Code Example

const ErrorMessage = () => {
  const hasError = true;

  return (
    <section>
      <h2>Form</h2>
      {hasError && <p>There was an error submitting the form.</p>}
    </section>
  );
};

render(<ErrorMessage/>);