If the object has a value of
null, it will result in a type error.
In our example here, we have a React application where users can edit posts they have made.
isPostAuthor is true – meaning the authenticated user has the same id as the id of the author of the post – will we show the
The problem with this code is that our
user value might have a value of
undefined. This is why we must use the
&& operator to make sure
user is an object before we attempt to get the
If we were to access an object within an object, we would have to include another
&& conditional. This can cause our code to become tedious and hard to understand.
To make sure an object exists before attempting to access a property off of it, just put a question mark immediately afterwards:
This will prevent any type errors and allows us to write much cleaner conditional logic.
In React applications, we can write components with either the function declaration syntax using the
function keyword or we can use an arrow function, which must be set to a variable.
It’s important to note that components which use the
function keyword must use the
return keyword before returning any JSX.
return keyword), by wrapping the returned code in a set of parentheses.
For components made with arrow functions, we do not have to include the
return keyword – we can just return our JSX with a set of parentheses.
Additionally, whenever you are iterating over a list of elements with the React
.map() function, you can also skip the return keyword and return your JSX just with a set of parentheses in the body of your inner function.
NaN), we can use the or (
||) conditional to provide a fallback value.
For example, if we have a product page component and we want to display a given product’s price, you can use a
|| conditional to either show the price or show the text “Product is unavailable”.
However, there’s a small error with our existing code.
If the price has the value of
0, which is falsy, instead of showing the price itself, we’re going to show the text “Product is unavailable” – which is not what we want.
We need a more precise operator to only return the right hand side of our expression if the left hand side is
undefined instead of any falsy value.
This is available now in the nullish coalescing operator. It will return its right hand operand when its left hand operand is
undefined. Otherwise it will return its left hand side operand:
The way to fix our code that we have above is simply to replace the or conditional with the nullish coalescing operator to show the correct price of
When it comes to using state in React, we have a couple options: we can create many state variables with the
useState hook for individual primitive values or manage multiple values within one state variable using an object.
In the example below, we have a signup page where we are keeping track of current users’ username, email, and password.
When they submit the signup form, we validate the form contents they typed in and handle signing up the user.
Note additionally that when using the
useState hook, you must spread in all of the previous state in order to update an individual key value pair.
Whenever a user types into an input and the change event takes place, the
handleChange function is called.
Then we not only update a certain input’s value according to its
name attribute, but we also spread in all of the current state values of username, email, and password. We spread all of these values as individual properties in the new object we are setting in state with the
... – the object spread operator.
Ternaries are an essential operator to use when writing conditionals within React components.
We often use ternaries within our JSX because they are expressions and resolve to one or another value that can be displayed. This allows them to often be used to either show or hide components and elements.
It’s worth noting, however, that we can use ternaries when it comes to any value within our JSX.
That means, instead of using third-party libraries like
You can see in the example here that if our user has selected dark mode, we’re applying a class
body-dark. Otherwise we apply the class
body-light to give our application the appropriate styles to everything within our
It’s worth noting that this conditional logic can be applied to any prop as well, not just classnames or inline styles.
We have another example here in which our application is detecting whether the user’s on a mobile device or not with a special hook. If so, we pass down a specific height value through the prop
height to our
The React Bootcamp takes everything you should know about learning React and bundles it into one comprehensive package, including videos, cheatsheets, plus special bonuses.
Gain the insider information 100s of developers have already used to become a React pro, find their dream job, and take control of their future:
This content was originally published here.