Newsletter sign up with React

Hey,

after taking a look at your code it looks like you are writing Vanilla JS in React. Using DOM API like querySelector() in React is generally a last resort. Since you are bringing in a UI framework you should actually use it.

The main problem with your implementation, from a conceptual standpoint, is that you have 2 sources of truth governing what gets rendered - React and Css classes. Let's take a look at your e-mail validation error message:

<div className='form__text'>
  <label htmlFor="email">Email address</label>
  <span>Valid email required</span>
</div>

You trigger the visibility of this div by changing the class. In React, this same functionality should be achieved by declaring an 'isErrorVisible" boolean variable using useState() and changing the code as follows:

 {isErrorVisible && (
        <div className="form__text">
          <label htmlFor="email">Email address</label>
          <span>Valid email required</span>
        </div>
  )}

And of course changing the state in your submit function. You have only one class on your element this way and no reason to query any selectors. (You can also conditionally trigger classes based on the state if you really need it)

Hope this helped