Show UI if a variable is true – React JS

In this article, we will discuss how you can hide or show any UI if the value of a variable is true in React JS. Following this tutorial, you will also learn how to use the if condition in React JS. You just need to do 3 things:

1. Import useState from “react”
2. Create a variable
3. Show UI only if that variable is true

Here is the code:

import { useState } from "react"

function App() {

  const [showButton, setShowButton] = useState(false)

  return (
    <button>Always show</button>

    { showButton && (
        <button>
          Show only when required
        </button>
    ) }
  )
}

export default App

By default, you will not see the second button because the default value is false. Try changing the value of the variable from false to true, you will start seeing the UI.

Check out our more tutorials on React JS.