i made a MailInput component :

function MailInput(props) {
  return (
    <div className="mail-input">
      <input
        type="email"
        placeholder="Enter your email"
        className="mail-input"
        onChange={props.redirect}
      />
    </div>
  );
}

export default MailInput;

i called MailInput in this component :

function ProfileBody() {
  const [email, setEmail] = useState("");
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const handleChangeEmail = (e) => {
    setEmail(e.target.value);
    console.log(email);
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    CreateUser(email, username, password);
  };

  return (
    <div className="profile-div">
      <ProfileCard img={pdp}/>
      <h1 className="mail-title">Email :</h1>
      <MailInput redirect={() => handleChangeEmail()}/>
      <h1 className="password-title">Mot de passe :</h1>
      <PasswordInput />
      <Button height="50px" width="50px" redirect={() => handleSubmit() } />
      <Insta />
      <Face />
    </div>
  )
}

i'm trying to get what's written in the input tag but it didn't work the way i did it. i'm a newbie to react js and javascript in general so i probably missed a bunch of stuff

CodePudding user response：

Inside the onChange prop you are passing a function that does not accept any parameters: () => handleChangeEmail() but when you defined the function it it supposed to be called with an event argument: handleChangeEmail = (e) => {}.

The prop is also called onChange yet you are trying to access it inside the MailInput component as props.redirect when it should be props.onChange.