DEV Community

How I think when I write a React component. 🤔

Ioannis Potouridis on November 02, 2019

This is going to be a short demonstration on how I usually think when I write a React component. So, let's say that I want to create a form compon...
Collapse
 
loq24 profile image
Lougie •

Personally, I think it's better for the input field to be separated into a new component?

Collapse
 
potouridisio profile image
Ioannis Potouridis •

Definitely!

Collapse
 
monfernape profile image
Usman Khalil •

I love the concept. But don't you think it makes the code less readable.

Collapse
 
potouridisio profile image
Ioannis Potouridis •

Well, I agree! But it also makes it more reusable.

You can go either way.

IMO it's always a balancing act.

Collapse
 
dinsmoredesign profile image
Derek D •

You're missing the input type 😞

Collapse
 
potouridisio profile image
Ioannis Potouridis •

Ah! Thanks! 👍

Collapse
 
seanmclem profile image
Seanmclem •

I like it. It's just a generalization about making code more concise in React. Very readable after you've been writing code like this for a while

Collapse
 
potouridisio profile image
Ioannis Potouridis •

I agree.

I believe readable code means what one understands.

Whenever something seemed unreadable to me I always asked myself -Why is this written this way and how does it work?

Collapse
 
sabbin profile image
Sabin Pandelovitch • • Edited

Nice. One observation only, if you use desconctructive for the map function object, why don't you use it on the handleChange also?

Collapse
 
potouridisio profile image
Ioannis Potouridis •

No reason at all, I got used to write that handler this way.

I'll update it for code consistency though. Thanks! 👍

Collapse
 
spacer33 profile image
spacer33 • • Edited

Nice example!

Just one thing, using index as a key is not a good practice, field is also unique, so better use it as a key (+one less variable)

Collapse
 
potouridisio profile image
Ioannis Potouridis •

I agree, good point!

Since the example uses fields that are presented as user input with no unique identifiers though, I felt safer using the index. 😁