How to check for duplicate add on client in React?

Question

JavaScript

Hey!
I have 2 fields email and name and a submit button .
After clicking on the button, the form is submitted and the following code is triggered

validate(state, form) {
    // сначала валидируем 
     ...
    return this.request(form);
  }
  request(form) {
    // затем отправляем запрос
    ...
   return fetch(...)
  }

  handleSubmit(e) {
    e.preventDefault();

    return this.validate(this.state.emailData, e.target);
  }

Now requests are sent every time the button is clicked. I want to validate the form after pressing submit , for example, as in a method componentDidUpdatethat will return the previous ones to me props(which I don’t use because this method fires on every state change and there is one in my class onChangethat changes this state when text is entered in input).
How to implement the same behavior as in componentDidUpdate, but only after clicking on the submit button?

Answer 1

state: { hadSubmitted: false, };

componentDidUpdate(prevProps, prevState) {
    const { hadSubmitted } = this.state;

    if (hadSubmitted) {
        //...validate
    }
}

handleSubmit(e) {
    ...
    this.setState({
       hadSubmitted:  true,
    });
}

validate(state, form) {
    ...
    this.setState({ hadSubmitted: false, })
}