Two very simple ways to render UI conditionally in React.

In this article, we'd be looking at what conditional rendering in React is and two simple methods by which we can display or render some particular information in our UI based on some conditions.

We would then look at a way to do something practical with it by displaying a user's input from the native browser Window.prompt() API. if this is the first time you're coming across the word prompt() kindly check this useful resource to get you up and running.

Okay, let's get going...

Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them.

The two methods that would be considered here are;

• The if (//condition) { block } statement and
• The conditional operator (ternary operator)

Let's start by creating the components that we would be needing. We want the information in our browser to be displayed as the user either enters data into the prompt dialogue box or not. If the user inputs their details/name/answer.

function Friend() {
  return <h1>Hello {visitor} 😎 welcome to this space</h1>
}

function Stranger() {
  return <h1>Hello stranger 😬 🤬 , welcome to this space</h1>
}

We have both components ready now. Notice the javascript expression {visitor} in the Friend component? Yeah 😇 , that's the variable that holds the user input from the prompt dialogue box. I'm guessing now, you're like "how do I get the input from the dialogue box 🤔 ". Do not fret, all we just need to do is assign the prompt() method to the visitor variable.

const visitor = prompt("Hey there, may I know your name?")

If the user enters their name in the dialogue box, the value gets stored in the variable visitor and if not, the variable gets assigned a value null.

Now that we have both components, let's see how we can render data to the App UI. Let's create an App component that would serve as an entry point for our previous components.

• Method one: (if statement)

  function App() {
  if (visitor) {
    return <Friend />
  }
  return <Stranger />
  }
  

• Method two: conditional (tenary) operator

  function App() {
  return (
    <div>
      <h1>Hello {visitor ? `${visitor}😎` : 'stranger 😬🤬'}, welcome to this space.</h1>
    </div>
  )
  }
  

  If visitor evaluates to true then, the <Friend /> component is rendered.

else <Stranger /> is.

Notice that the second method is very short and straight forward. We made use of es6 template literals there also, to interpolate our variable and the text we want to display.

You can find the video example here

Disclaimer: these are not the only methods available out there being used to perform conditional rendering in react. Check them here

Thank you for reading this, if it has helped you gain something substantial, kindly share with your friends.