Contact Form

Community feedback

• 

  Lance•1,580

  @IzykGitPosted 3 months ago

  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

  ---

  

  Adarsh Gupta•750

  @adarsh78Posted 3 months ago

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

  0