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
 
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
 
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
 
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. 😁