⚛️React conditional rendering

displaying content based on different situations

We have looked into how to display content in the most basic way with React. Now, we can have a look at how to display content based on some condition. This gives our components a more dynamic life, altering content depending on different situations!

At least three methods exist for conditional rendering:

• if statements

• ternary operator

• logical and (&&) operators

Using if statements

The if would appear before the final returnstatement, with a return statement of its own, e.g.

import RenderThis from './RenderThis'
import RenderThat from './RenderThat'

// the value of this can come from anywhere or hard-coded here
const someCondition = true

function X() {
    if (someCondition) {
        return <RenderThis />
    }
    return <RenderThat />
}

function App() {
    return <X />
}

In that example, based on someCondition, the component X will render

• RenderThis if someCondition is true

• RenderThat if someCondition is false

As we know with the returnstatement, once executed, the code will skip (i.e. ignore) everything else in the block.

Using ternary operators

This involves the ternary operator syntax that we just have to see with an example:

import RenderThis from './RenderThis'
import RenderThat from './RenderThat'

// the value of this can come from anywhere or hard-coded here
const someCondition = true

function X() {
    return {someCondition ? <RenderThis /> : <RenderThat />}
}

function App() {
    return <X />
}

As we see there, this provides a streamlined syntax compared to the ifstatement!

Using logical `&&`

Finally, another way to render conditionally on React:

import RenderThis from './RenderThis'
import RenderThat from './RenderThat'

// the value of this can come from anywhere or hard-coded here
const someCondition = true

function X() {
    return (
        { someCondition && <RenderThis /> }
        { !someCondition && <RenderThat /> }
    )
}

function App() {
    return <X />
}

A little less streamlined than the ternary operator, this method actually works best if we only want to render something for one and only one condition!