Ternary Operator in React JS

hello Guys today i am going to show you how to use Ternatory operator in React js.

Lets get started...

Ternary Operator -
The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. This operator is frequently used as a shortcut for the if statement.

I am going to show the use of ternary operator through a simple dark mode example-

NOTE - I AM USING BOOTSTRAP CLASSES FOR STYLING IN THIS TUTORIAL!!

Changing class name with ternary operator -

import React,{useState} from 'react'

function App() {
    const [darkMode, setDarkMode] = useState(false);

    const toggleDarkMode = () => setDarkMode(!darkMode);

    return (
        <div>
            <div className={darkMode ? 'bg-dark text-light text-center p-4' : 'bg-light text-dark text-center p-4'}>
                <h1 className='display-1'>Some text inside this box </h1>
            </div>
            <div className='text-center my-5'>
                <button className='btn btn-primary' onClick={toggleDarkMode}>{darkMode ? 'Light mode' : 'Dark mode'}</button>
            </div>
        </div>
    )
}

export default App

Explaination -

First we created state named "darkMode" using useState and set it to false.

Then we created a variable named "toggleDarkMode" and assign it a value of arrow function in which we toggle the value of "darkMode" to true if it is false and to false if it is set to true.

Then in the div className , we have used the ternary operator in which we have passed the class name according to the state of "darkMode" , if it is set to true then the bg-color will be dark and text color will be white and if it is set to false then the bg-color will be white and text color will be black.

Then we have a button which has an onClick event handler which calls the toggleDarkMode arrow function when clicked and change the state of "darkMode" to true if it is false and to false if it is true , this button will enable and disable dark mode theme.

We have also used ternary opertor in button text in which the text will be "light mode" if the state of "darkMode" is true and text will be "dark mode" if the state of "darkMode" is false.

OUTPUT -

You can also use ternary operator in other places as well like in inline style attribute like below

Ternary operator with style attribute -

import React,{useState} from 'react'

function App() {
    const [darkMode, setDarkMode] = useState(false);
    const toggleDarkMode = () => setDarkMode(!darkMode);

    const styleDiv = {
        backgroundColor:darkMode ? 'black' : 'white',
        color: darkMode ? 'white' : 'black',
        textAlign:'center',
        padding:'2rem'
    }

    return (
        <div>
            <div style={styleDiv}>
                <h1 className='display-1'>Some text inside this box </h1>
            </div>
            <div className='text-center my-5'>
                <button className='btn btn-primary' onClick={toggleDarkMode}>{darkMode ? 'Light mode' : 'Dark mode'}</button>
            </div>
        </div>
    )
}

export default App

Explaination -

Everything is same except we have used the style attribute in place of class and change the background-color and color property in accordance with state of "darkMode" .

OUTPUT -