Conditional Rendering in React JS

 Conditional Rendering in React JS

Conditional rendering allows you to show different UI elements based on certain conditions. Here's an example of a component that renders different elements based on the value of a prop:

jsx

function Greeting(props) {

  if (props.isLoggedIn) {

    return <h1>Welcome back!</h1>;

  } else {

    return <h1>Please log in.</h1>;

  }

}

ReactDOM.render(

  <Greeting isLoggedIn={true} />,

  document.getElementById('root')

);

In this example, the Greeting component checks the value of the isLoggedIn prop and renders a different message based on whether the user is logged in or not.