9 common mistakes beginners make React

Here is my summary for the article “ Common Beginner Mistakes with React ” by Josh W. Comeau. Please visit the author’s original blog to read the English version.

Error 1: Comparison with 0

Let’s say you have a list of items and will render if there is at least one element.

const [items, setItems] = React.useState([]);

Would you write it like this expecting to be visible only when the list has an element:

However, when items has no elements, a number 0. Why is that?

When items.length has the value 0 which is a falsy value in JS, the && combination results in 0.

In JSX, 0 is a valid value, so it is built into the UI.

Fix 1: using comparison returns boolean as true/false

Fix 2: return null if no element

Error 2: Change the value of state

Suppose you need to add an element, in the handler function when adding the section, you might have done:

Result : adding an element no element is built into the UI.

The problem : this code violates the core principle of React, the value of state must not be changed.

How to fix: need to create a new array for the changelist and then assign the value state

Error 3: Did not generate key when rendering element in list

When you render the list of elements:

there will be an error saying “Warning: Each child in a list should have a unique “key” prop.”

You will need to provide context for React to distinguish between elements, by providing keys with unique values.

Error 4: Missing spaces

For example:

Result: Welcome to blog!Log in to continue

How to fix: add a space {' '} between two lines.

Error 5: Accessing state value after change

Suppose to print out state items after changing the state from the original items [] as follows:

then the result displayed on the screen is an added element.

But in console the result is still []

Reason : the setItems() function is asynchronous, meaning it doesn’t immediately change the value, but is only scheduled to update this state. Therefore, this change takes a certain time to complete.

How to fix: use an intermediate variable to access

Error 6: Returning multiple components in component

Sometimes you will need to return multiple elements, for example a label tag and an input.

If you write something like this:

it will give the error “Adjacent JSX elements must be wrapped in an enclosing tag.”

Reason : JSX elements need to be wrapped by a collapsible tag pair.

Bug fix : use <React.Fragment></React.Fragment> , or <></> for short

Error 7: Moving component from uncontrolled to controlled

Assuming the input is email, when changing the value will reset the state for the email variable

When you enter a value into the input, you will get an error “Warning: A component is changing an uncontrolled input to be controlled”

The reason is that the email state variable has no initial value, so the value is undefined. And when I assigned value={email} I told React this is an uncontrolled component.

However, when you change the state, you want it to act as a controlled component, so it will cause an error.

How to fix: make sure email with initial value is not undefined const [email, setEmail] = React.useState('');

Error 8: Missing {} for code style

In CSS, the style attribute uses style

But in JSX, the style attribute needs to be wrapped by {}, and the values ​​are written in the object’s syntax. { color: 'red', fontSize: '1em' }

And since it’s a value of the style attribute, an extra pair of {} is needed to represent that.

If you want more clarity, you can create a separate variable for the style and then use:

Error 9: Async effect function

Assuming you need to call an API that returns a list of items, you use the useEffect hook and await as follows:

The above code will cause an error because await is only used with async functions. Even if you add async like this, you will still get the error:

How to fix: write a separate async function for invoke

Reason : the async function returns a promise, but the useEffect hook can’t handle the return promise, so we need to move the async function separately and call it so that the function in useEffect is clean.

Summary article from this blog , please read and support the author

This Vietnamese article is reposted from the original BeautyOnCode blog post .