The Truth Table in React

One of the first topics you learn about when you get introduced to programming is “The Truth Table”, Do you remember that topic?

In case you don’t, here’s a reminder:

I remember memorizing that table, I kept repeating it day and night, but I never had any real application for it (or so I thought…)

Today I realized that I’ve been using it all the time but I never knew 🤯

The most common use case is showing/hiding a component based on conditions with the && operator

true && <Component/> {/* will render the component*/}

false && <Component/> {/* will hide the component*/}

Does this code block look familiar?

It’s !!

Actually, these conditions resolve to

true && true => true 

false && true => false 

Which is the result expected if you know the truth table

Another use-case is using the || operator to assign a default value

Ignoring that we could set the initial state to [] instead of null , using the || operator could come in handy.

In this example, we pass a prop called data to the Blog component, posts have a falsy initial value (null ) and the empty array is a truthy value

data={false || []} {/* sends the empty array to Blog component */}

so that expression will resolve to

false || true => true

After the API call resolves successfully and our posts become populated, posts become truthy

true || true => true

But which true value is sent

|| behaviour is to return the first truthy value, opposite to && which returns last truthy value

and since our posts are truthy now

data={true || []} {/* sends posts array to Blog component*/}

Hope you found this post useful,

If you know of any other use cases, feel free to share them in the comment section.

Ciao👋