import React, {
  useState
} from "react";
export default function DropDown() {
  const [mail, useEmail] = useState("");
  const [disabled, useDisabled] = useState(false)
  const handleChange = (e) => {
    useEmail(e.target.value)
  }
  if (mail.includes('[email protected]')) {

    React.useEffect(() => {
      setInterval(() => {
        useDisabled(true);
      }, 2000);
    })
  } else {
    useDisabled(false)
  }
  return (
    <>
      <input 
        value={ mail }
        onChange={ handleChange }
        maxLength="20" 
      />
      <button 
        disabled={ mail.length < 1 }
      > Submit </button>
    </>
  );
}

but at the time it throws error like "Too many re-renders. React limits the number of renders to prevent an infinite loop." how to resolve that error?

CodePudding user response：

TL.DR:

import React, { useState } from "react";
export default function DropDown() {
    const [mail, setEmail] = useState("");

    const handleChange = (e) => {
        setEmail(e.target.value);
    };

    return (
        <>
            <input value={mail} onChange={handleChange} maxLength={20} />
            <button disabled={mail.includes("s@gmail.com") || mail.length < 1}> Submit </button>
        </>
    );
}

Let's break it down:

1. Hooks (useState, useEffect, etc) cannot be conditionally rendered, so you cannot write them inside if else statements.
2. const [mail, setMail] = useState(""). The second attribute should be setSomething, not useSomething. The useSomething should be reserved to the declarations of new hooks. The setMail returned by the useState is not a hook, but a normal function (the useState itself is the hook).
3. setState (or setDisabled, in your example) should never be used directly inside the render of a component. A setState causes the component to re-render so, if when re-rendering a setState is encountered, it will trigger another re-render, that will trigger another setState, and so on (leading to the ""Too many re-renders." you had). Generally speaking, setState should only be used on event handlers (such as onClick, onKeyDown, onSomethingElseHapped, etc)

There are a few more minor issues with your code. I encourage you to go through the basics of react one more time.

CodePudding user response：

You won't need to create a state for the disabled. You can simply validate using it on every render. The sample is given below. Whenever you update input, the component will retrigger and validation will be performed.

import { useState } from "react";
import "./styles.css";
const blackListed = /^s@gmail\.com$/;
const emailReg = /^\w ([- .']\w )*@\w ([-.]\w )*\.\w ([-.]\w )*$/;

const isEmailValid = (email = "") => {
  if (!email.length) return false;
  if (!emailReg.test(email)){
    return false
  }
  return !blackListed.test(email);
};
export default function App() {
  const [mail, setEmail] = useState("");
  const handleChange = ({ target: { value } }) => {
    setEmail(value);
  };
  const isValidEmail = isEmailValid(mail);
  return (
    <div>
      <input value={mail} onChange={handleChange} maxLength="20" />
      <button disabled={!isValidEmail}> Submit </button>
    </div>
  );
}

If you want to clear email after a certain time. You can use useEffect with setTimeout and watch for change.

 useEffect(() => {
    const id = setTimeout(() => {
      if (!isValidEmail && mail.length) {
        alert("Your email is invalid");
        setEmail("")
      }
    }, 1000)
    return () => clearTimeout(id);
  }, [isValidEmail])

Complete code:

import { useState, useEffect } from "react";
import "./styles.css";
const blackListed = /^s@gmail\.com$/;
const emailReg = /^\w ([- .']\w )*@\w ([-.]\w )*\.\w ([-.]\w )*$/;

const isEmailValid = (email = "") => {
  if (!email.length) return false;
  if (!emailReg.test(email)) {
    return false
  }
  return !blackListed.test(email);
};


export default function App() {
  const [mail, setEmail] = useState("");
  const handleChange = ({ target: { value } }) => {
    setEmail(value);
  };
  const isValidEmail = isEmailValid(mail);

  // Clear after some toat and message.
  useEffect(() => {
    const id = setTimeout(() => {
      if (!isValidEmail && mail.length) {
        alert("Your email is invalid");
        setEmail("")
      }
    }, 1000)
    return () => clearTimeout(id);
  }, [isValidEmail])

  return (
    <div>
      <input value={mail} onChange={handleChange} maxLength="20" />
      <button disabled={!isValidEmail}> Submit </button>
    </div>
  );
}

Working code:

https://codesandbox.io/embed/nervous-cache-tm5yt?fontsize=14&hidenavigation=1&theme=dark