React Developer -

Lesson 3 of 39

Lesson Progress: 0%

Lesson Incomplete

← Previous: Conditional Rendering - Ternary

Lesson 3 of 39

Next: Conditional Rendering - Login/Logout →

Code Example

function Greeting(props) {
  return (
    <div>
      {props.isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
}

render(<Greeting isLoggedIn={true} />);

Instructions

▼ ← Click the triangle to hide or reveal instructions.

Props are values passed into a React component, so the component can use that information to decide what to show.
This is a function declaration component, which means the component is written as a named function.
A function declaration uses the word function at the beginning.
function Greeting(props) { means we are making a component named Greeting, and props holds the value passed into it.
In the ternary expression, the ? means "show this if true" and the : means "otherwise show this."
{props.isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>} checks the isLoggedIn value and shows one message if it is true, or a different message if it is false.

Code Example

function MessageStatus(props) {
  return (
    <div>
      {props.hasMessages ? <p>You have new messages.</p> : <p>No new messages.</p>}
    </div>
  );
}

render(<MessageStatus hasMessages={false} />);

Instructions

▼ ← Click the triangle to hide or reveal instructions.

Props are values passed into a React component, so the component can use that information.
This is a function declaration component, which means it is written as a named function.
A function declaration uses the word function at the beginning.
function MessageStatus(props) { makes a component named MessageStatus, and props holds the value passed into it.
In the ternary expression, the ? means "show this if true" and the : means "otherwise show this other part."

Code Example

const Greeting = function (props) {
  return (
    <div>
      {props.isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
};

render(<Greeting isLoggedIn={true} />);

Instructions

▼ ← Click the triangle to hide or reveal instructions.

In React, props are a lot like function inputs, because they pass information into a component.
This is a function expression, which means a function is being saved inside a variable.
A function expression still uses the word function when the function is written.
const Greeting = function (props) { means we are storing a function in the Greeting variable, and props receives the passed-in value.
In the ternary expression, the ? means "if true, show this" and the : means "otherwise, show this other part."

Instructions

▼ ← Click the triangle to hide or reveal instructions.

In React, props are like function inputs, because they pass information into a component.
This is a function expression, which means a function is being stored inside a variable.
A function expression still uses the word function when the function is written.
const MessageStatus = function (props) { means we are storing a function in the MessageStatus variable, and props receives the value that is passed in.
In the ternary expression, the ? means "if true, show this" and the : means "otherwise, show this other part."

Instructions

▼ ← Click the triangle to hide or reveal instructions.

In React, props are like function inputs, because they pass information into a component.
This is an arrow function component, which is a short way to write a component.
An arrow function does not use the word function, and uses => instead.
const Greeting = (props) => { means we are saving the component in the Greeting variable, and props receives the value passed in.
In the ternary expression, the ? means "if true, show this" and the : means "otherwise, show this other part."

Instructions

▼ ← Click the triangle to hide or reveal instructions.

In React, props are like function inputs, because they pass information into a component.
This is an arrow function, which is a shorter way to write a function in JavaScript.
An arrow function skips the word function and uses => instead.
const MessageStatus = (props) => { means we are saving the function in the MessageStatus variable, and props receives the value passed in.
In the ternary expression, the ? means "if true, show this" and the : means "otherwise, show this other part."

Instructions

▼ ← Click the triangle to hide or reveal instructions.

In React, props are like function inputs, because they pass information into a component.
This is an arrow function, which is a shorter way to write a function in JavaScript.
An arrow function skips the word function and uses => instead.
const OnlineStatus = (props) => { means we are saving the function in the OnlineStatus variable, and props receives the value passed in.
In the ternary expression, the ? means "if true, show this" and the : means "otherwise, show this other part."

Test Incomplete

Training Mode

Testing Mode

Random Order

What is the primary function of props in a React component?

To define the component's internal state.To store global application data permanently.To pass values into a component so it can use that information to decide what to show.To connect the component to an external database.

Question #

1/15

Score

0/0 - 0.0 %

Code Example

const MessageStatus = function (props) {
  return (
    <div>
      {props.hasMessages ? <p>You have new messages.</p> : <p>No new messages.</p>}
    </div>
  );
};

render(<MessageStatus hasMessages={false} />);

Code Example

const MessageStatus = (props) => {
  return (
    <div>
      {props.hasMessages ? <p>You have new messages.</p> : <p>No new messages.</p>}
    </div>
  );
};

render(<MessageStatus hasMessages={false} />);

Code Example

const OnlineStatus = (props) => {
  return (
    <div>
      {props.isOnline ? <p>User is online.</p> : <p>User is offline.</p>}
    </div>
  );
};

render(<OnlineStatus isOnline={true} />);