Contact Form

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!