Getting an error of Cannot read properties of undefined (reading 'handleSubmit') in my con-CodePudding

I am getting an error in the console when I run my code and check the console its showing me an undefined reading 'handlesubmit' is saying that that the properties ive put down are not defined I am trying to read in the properties entered to the form to be saved in the console when the user enters hit details and clicks the sign up button I'll paste the code down below to show what I've done and would really appreciate help on how to fix this issue cheers.

const handleSubmit = e => {
    e.preventDefault();
    const data = {
        first_name: this.firstName,
        last_name: this.lastName,
        email: this.email,
        password: this.password,
        confirm_password: this.confirmPassword
    };
    console.log(data);
};

return (
    <form onSubmit={handleSubmit} >
        <h3>Sign Up</h3>

        <div className="form-group">
            <label> First Name</label>
            <input type="text" className="form-control" placeholder="First Name"
                onChange={e => this.firstName = e.target.value} />
        </div>

        <div className="form-group">
            <label> Last Name</label>
            <input type="text" className="form-control" placeholder="Last Name"
                onChange={e => this.lastName = e.target.value} />
        </div>

        <div className="form-group">
            <label> Email</label>
            <input type="email" className="form-control" placeholder="Email"
                onChange={e => this.email = e.target.value} />
        </div>

        <div className="form-group">
            <label> Password</label>
            <input type="password" className="form-control" placeholder="Password"
                onChange={e => this.password = e.target.value} />
        </div>`

        <div className="form-group">
            <label> Confirm Password</label>
            <input type="password" className="form-control" placeholder="Confirm Password"
                onChange={e => this.confirmPassword = e.target.value} />
        </div>`

        <button className="btn btn-primary btn-block" > Sign Up</button>

    </form >
);

}

export default Register;

CodePudding user response：

The primary issue here is that you aren't actually storing the user's entered data anywhere. this does not mean anything in a functional component out of the box, you need to store this data somewhere, like state, as it is entered.

Here's one example for one of the inputs:

const [firstName, setFirstName] = useState('');

const handleSubmit = e => {
    e.preventDefault();
    const data = {
        first_name: firstName,
        last_name: this.lastName,
        email: this.email,
        password: this.password,
        confirm_password: this.confirmPassword
    };
    console.log(data);
};

return (
    <form onSubmit={handleSubmit} >
        <h3>Sign Up</h3>

        <div className="form-group">
            <label> First Name</label>
            <input type="text" className="form-control" placeholder="First Name" value={firstName} onChange={e => setFirstName(e.target.value)} />
        </div>

        <div className="form-group">
            <label> Last Name</label>
            <input type="text" className="form-control" placeholder="Last Name"
                onChange={e => this.lastName = e.target.value} />
        </div>

        <div className="form-group">
            <label> Email</label>
            <input type="email" className="form-control" placeholder="Email"
                onChange={e => this.email = e.target.value} />
        </div>

        <div className="form-group">
            <label> Password</label>
            <input type="password" className="form-control" placeholder="Password"
                onChange={e => this.password = e.target.value} />
        </div>`

        <div className="form-group">
            <label> Confirm Password</label>
            <input type="password" className="form-control" placeholder="Confirm Password"
                onChange={e => this.confirmPassword = e.target.value} />
        </div>`

        <button className="btn btn-primary btn-block" > Sign Up</button>

    </form >
);

Here is some additional reading on "controlled inputs": https://dmitripavlutin.com/controlled-inputs-using-react-hooks/

CodePudding user response：

Here is a more complete example on how to use setState, I hope this helps

import React, {setState} from 'react';


export default function App() {
  const [firstName, setFirstName] = useState('');
  const [lasttName, setLastName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassWord] = useState('');

  const handleSubmit = e => {
  e.preventDefault();
  const data = {
    first_name: firstName,
    last_name:  lastName,
    email: email,
    password: password,
    confirm_password: confirmPassword
  };
  console.log(data);
 };
  
  return (
       <form onSubmit={handleSubmit} >
        <h3>Sign Up</h3>

        <div className="form-group">
            <label> First Name</label>
            <input type="text" className="form-control" placeholder="First Name" 
            value={firstName} onChange={e => setFirstName(e.target.value)} />
        </div>

        <div className="form-group">
            <label> Last Name</label>
            <input type="text" className="form-control" placeholder="Last Name"
            onChange={e => setLastName(e.target.value)} />
        </div>

       <div className="form-group">
           <label> Email</label>
           <input type="email" className="form-control" placeholder="Email"
            onChange={e => setEmail(e.target.value)} />
       </div>

       <div className="form-group">
           <label> Password</label>
           <input type="password" className="form-control" 
            placeholder="Password"
            onChange={e => setPassword(e.target.value)} />
       </div>`

       <div className="form-group">
           <label> Confirm Password</label>
           <input type="password" className="form-control" placeholder="Confirm 
            Password"
            onChange={e => setConfirmPassword(e.target.value)} />
      </div>`

      <button className="btn btn-primary btn-block" > Sign Up</button>

</form >
  );
}