handleSubmit not working when I try to use the function-CodePudding

I am getting an error in my code of handleSubmit function because ,here I am using this syntax 'export const Register = ()',so what needs to be fixed in my code so that I;m able to use the handleSubmit function I'll paste the code down below it keeps saying its not defined ive tried adding function handleSubmit() and const handleSubmit = () but its still not working any help on how to resolve this error please as i've tried for hours now i'm new to react and wondering as how i would be able to resolve this error

export const Register = () => {


handleSubmit = e => {
    e.preventDefault();
    console.log('works!');
};

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

        <div className="form-group">
            <label> First Name</label>
            <input type="text" className="form-control" placeholder="First Name" />
        </div>

        <div className="form-group">
            <label> Last Name</label>
            <input type="text" className="form-control" placeholder="Last Name" />
        </div>

        <div className="form-group">
            <label> Email</label>
            <input type="email" className="form-control" placeholder="Email" />
        </div>

        <div className="form-group">
            <label> Password</label>
            <input type="password" className="form-control" placeholder="Password" />
        </div>`

        <div className="form-group">
            <label> Confirm Password</label>
            <input type="password" className="form-control" placeholder="Confirm Password" />
        </div>`

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

    </form >
);

}

export default Register;

CodePudding user response：

When using the arrow function syntax, the function has to be declared with const. Make it like this:

const handleSubmit = e => {
    e.preventDefault();
    console.log('works!');
};

Also, you only need to export the Register component once. Using export default Register at the end is sufficient.

CodePudding user response：

And we don't use this in a function component, it is just hadleSubmit:

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

        <div className="form-group">
            <label> First Name</label>
            <input type="text" className="form-control" placeholder="First Name" />
        </div>

        <div className="form-group">
            <label> Last Name</label>
            <input type="text" className="form-control" placeholder="Last Name" />
        </div>

        <div className="form-group">
            <label> Email</label>
            <input type="email" className="form-control" placeholder="Email" />
        </div>

        <div className="form-group">
            <label> Password</label>
            <input type="password" className="form-control" placeholder="Password" />
        </div>`

        <div className="form-group">
            <label> Confirm Password</label>
            <input type="password" className="form-control" placeholder="Confirm Password" />
        </div>`

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

    </form >