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... Read full post Collapse Expand Lougie Lougie Lougie Follow React & React Native developer Joined Jun 9, 2019 • Nov 2 '19 Dropdown menu Copy link Hide Personally, I think it's better for the input field to be separated into a new component? Collapse Expand Ioannis Potouridis Ioannis Potouridis Ioannis Potouridis Follow Location Thessaloniki Work Senior Front-end Engineer, Lead ReactJS Engineer at Kiss my Button Joined Sep 24, 2019 • Nov 2 '19 Dropdown menu Copy link Hide Definitely! Collapse Expand Usman Khalil Usman Khalil Usman Khalil Follow Web Developer. Dead Location Multan Education Bachelor Mechanical Engineering Work Frontend engineer at Copilot Joined Jan 10, 2019 • Nov 2 '19 Dropdown menu Copy link Hide I love the concept. But don't you think it makes the code less readable. Collapse Expand Ioannis Potouridis Ioannis Potouridis Ioannis Potouridis Follow Location Thessaloniki Work Senior Front-end Engineer, Lead ReactJS Engineer at Kiss my Button Joined Sep 24, 2019 • Nov 2 '19 Dropdown menu Copy link Hide Well, I agree! But it also makes it more reusable. You can go either way. IMO it's always a balancing act. Collapse Expand Sabin Pandelovitch Sabin Pandelovitch Sabin Pandelovitch Follow Started low with PHP. Climbed the ladder and stumbled upon jQuery. Reached the clouds on NodeJs and ended in heaven with ReactJs. Location Romania Work Full stack JavaScript developer Joined Oct 19, 2019 • Nov 4 '19 • Edited on Nov 4 • Edited Dropdown menu Copy link Hide Nice. One observation only, if you use desconctructive for the map function object, why don't you use it on the handleChange also? Collapse Expand Ioannis Potouridis Ioannis Potouridis Ioannis Potouridis Follow Location Thessaloniki Work Senior Front-end Engineer, Lead ReactJS Engineer at Kiss my Button Joined Sep 24, 2019 • Nov 5 '19 Dropdown menu Copy link Hide No reason at all, I got used to write that handler this way. I'll update it for code consistency though. Thanks! π Collapse Expand Derek D Derek D Derek D Follow Location Mesa, AZ Work Senior Front End Engineer @ Bitly Joined Aug 19, 2018 • Nov 4 '19 Dropdown menu Copy link Hide You're missing the input type π Collapse Expand Ioannis Potouridis Ioannis Potouridis Ioannis Potouridis Follow Location Thessaloniki Work Senior Front-end Engineer, Lead ReactJS Engineer at Kiss my Button Joined Sep 24, 2019 • Nov 4 '19 Dropdown menu Copy link Hide Ah! Thanks! π Collapse Expand Seanmclem Seanmclem Seanmclem Follow Developer looking to be awesome Location Floridia Work Senior web developer at Earth Joined Dec 27, 2018 • Nov 3 '19 Dropdown menu Copy link Hide 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 Expand Ioannis Potouridis Ioannis Potouridis Ioannis Potouridis Follow Location Thessaloniki Work Senior Front-end Engineer, Lead ReactJS Engineer at Kiss my Button Joined Sep 24, 2019 • Nov 3 '19 Dropdown menu Copy link Hide 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 Expand spacer33 spacer33 spacer33 Follow Joined Nov 5, 2019 • Nov 5 '19 • Edited on Nov 5 • Edited Dropdown menu Copy link Hide 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 Expand Ioannis Potouridis Ioannis Potouridis Ioannis Potouridis Follow Location Thessaloniki Work Senior Front-end Engineer, Lead ReactJS Engineer at Kiss my Button Joined Sep 24, 2019 • Nov 5 '19 Dropdown menu Copy link Hide 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. π Code of Conduct • Report abuse For further actions, you may consider blocking this person and/or reporting abuse
Personally, I think it's better for the input field to be separated into a new component?
Definitely!
I love the concept. But don't you think it makes the code less readable.
Well, I agree! But it also makes it more reusable.
You can go either way.
IMO it's always a balancing act.
Nice. One observation only, if you use desconctructive for the map function object, why don't you use it on the handleChange also?
No reason at all, I got used to write that handler this way.
I'll update it for code consistency though. Thanks! π
You're missing the input type π
Ah! Thanks! π
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
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?
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)
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. π