What are some examples of conditional rendering in React?

What are some examples of conditional rendering in React?

Conditional rendering in React allows you to render different UI elements based on certain conditions. For example, you can use the ternary operator to display a loading spinner while data is being fetched, or show an error message if the fetch fails.

Can you show me a code example?

Sure! Here's a simple example:

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? <UserGreeting /> : <GuestGreeting />;
}

In this example, the Greeting component renders either UserGreeting or GuestGreeting based on the isLoggedIn prop.

What about using if statements for conditional rendering?

You can definitely use if statements! Here's an example:

function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

In this case, the if statement checks the isLoggedIn prop and returns the appropriate greeting.

Are there any best practices for conditional rendering?

Yes! Some best practices include keeping your render methods clean, using helper functions for complex conditions, and avoiding deeply nested conditional logic to maintain readability.