Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Contact Form

@adarsh78

Desktop design screenshot for the Contact form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I have done this project in React. This is my first Form Validation Project in React and this is something I am proud of. Next time I am going to use any Form Validation Library to achieve the same task.

What challenges did you encounter, and how did you overcome them?

I have encountered challenges like keyboard navigation because of that I came to know about the function of useRef hook. I have read some articles on google to overcome this challenge.

What specific areas of your project would you like help with?

I would like to get help with my logic building and how optimized me code is and where can I improve myself. Any feedback is highly appreciated.

Community feedback

Lance 1,580

@IzykGit

Posted

Good work!

If you are looking to optimize your code there are a few tricks you can use to do this. It seems that you have a useState that is an object of input fields however you are creating refs and using that on all fields as a way to match them with the input fields. This has caused you to use a lot of if statements to match them.

In React when you have a state object you can use

const handleInputChange = (e, key) => {
  setInputStates(prevState => {
    return {
      ...prevState,
      [key]: e.target.value
    };
  });
};

The prevState is the input field values in the state object and in the return we are copying those previous values while matching the key paramter and assigning it to the event target value.

This will keep the previous state values while updating the value with the matching key.

This would allow you to dynamically use the input fields without having to use all those if statements.

Here is what the input field would look like

<input
  type="text"
  value={inputStates.username}
  onChange={(e) => handleInputChange(e, 'username')}
/>

In here we are giving that input field its matching value and then passing 'username' as the key we are going to use to match while also passing the event value (e).

Hope this helps, keep up the good work!

Marked as helpful

1

@adarsh78

Posted

@IzykGit Thanks for sharing your feedback. This will definitely help to make my code optimized and more readable.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord