Scribd
Upload
382 views

Simple react mistakes

Uploaded by

jocelynnsa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
382 views

Simple react mistakes

Uploaded by

jocelynnsa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Simple react mistakes

Raghuram Bharathan
·
Follow
·

82

1
While reviewing solutions for our react programming test

that we give for candidates applying to our organisation, I

observe the following mistakes fairly consistently.

Component changing uncontrolled input to


controlled
This is the typical warning

React warning for undefined state variable

It is due to this seemingly innocuous statement

const [username, setUserName] = useState();

which is used subsequently at

<input id="username" type="text" value={username}


onChange={(e) => setUserName(e.target.value)} />
Can you spot what the problem is here?

What is the initial value of username? It is undefined. When we

use an undefined value in the input field, the component

starts as an uncontrolled component. Once we start typing

into the input field and the setUserName method gets called,

then username gets a value and the component now becomes

controlled.

This explains the warning emitted by react, which is pretty

self-explanatory.

It gets trickier when we use a checkbox.

const [married, isMarried] = useState(false);

...

<input id="fork" type="checkbox" value={married} onChange={(e)


=> isMarried(e.target.value)} />
In this case, there is no warning (pun intended)!

But this one isn’t going to give you the desired value of

setting the married property to true or false

Can you spot the issue (in fact issues) here?

One is the absence of the checked property to indicate if the

checkbox should be checked or not. The other, more

important is, in case of checkbox, we are interested in the

property e.target.checked which is true or false depending on

the user action. e.target.value literally takes the value

specified in the value property. In our case, since it is set to

false, it is literally taken as "false" (string) and is pretty

much useless after that!

The right code is

<input id="fork" type="checkbox" checked={married}


onChange={(e) => isMarried(e.target.checked)} />
The third common mistake observed is iterating a list.

Here is the warning

Warning for missing keys

And the code is something like this

{repos.map((item) =>

<div className="row">

<div className="col">{item.name}</div>

<div className="col">{item.language}</div>

<div className="col">{item.description}</div>

<div className="col">{item.size}</div>

</div>
)}

What is missing is fairly obvious from the error message.

The key prop

{repos.map((item) =>

<div key={item.id} className="row">

<div className="col">{item.name}</div>

<div className="col">{item.language}</div>

<div className="col">{item.description}</div>

<div className="col">{item.size}</div>

</div>

)}

The fourth mistake, which has nothing to do with react is

getting the tags for table wrong.


Table related warning

Many developers do not get the html table structure

correct.

<table>

<tr>

<th>Name</th>

<th>Language</th>

<th>Description</th>

</tr>

</table>

It is a good practice to look for warnings when doing

application development. We can learn a lot from it.


Also see this for a couple of typical mistakes related to
state

You might also like