Signup-Form

import React, { Component } from 'react';
import { Form, Button } from "react-bootstrap"

class Signup extends Component {
    constructor(props) {
        super(props);
        this.state = {
                name: "",
                email: "",
                password: "",
                gender: "",
                mobile: "",
            }
            this.handleSubmit=this.handleSubmit.bind(this)
        }

        nameHandler = (event) => {
            this.setState({
                name: event.target.value
            })
        }

        emailHandler = (event) => {
            this.setState({
                email: event.target.value
            })
        }

        passwordHandler = (event) => {
            this.setState({
                password: event.target.value
            })
        }

        genderHandler = (event) => {
            this.setState({
                gender: event.target.value
            })
        }

        mobileHandler = (event) => {
            this.setState({
                mobile: event.target.value
            })
        }

        handleSubmit = (event) => {
            alert(`${this.state.name} Registered Successfully !!!`)
            console.log(this.state);
            this.setState({
                name: "",
                email: "",
                password: "",
                gender: "",
                mobile: "",
            })
            event.preventDefault()
        }

    render() {

        return (
            <div>
                <br></br>
                <h2><center>SignUp</center></h2>
                <Form style={{ width: "100%", marginTop: "10%" }} onSubmit={this.handleSubmit}>
                    <Form.Group>
                        <Form.Label>Name</Form.Label>
                        <Form.Control
                            type="text"
                            placeholder="Enter your name"
                            name="name"
                            value={this.state.name}
                            onChange={this.nameHandler}
                            required
                             />
                    </Form.Group>

                    <Form.Group>
                        <Form.Label>Email</Form.Label>
                        <Form.Control
                            type="email"
                            placeholder="Enter your email"
                            name="email"
                            value={this.state.email}
                            onChange={this.emailHandler}
                            required
                             />
                    </Form.Group>

                    <Form.Group>
                        <Form.Label>Password</Form.Label>
                        <Form.Control
                            type="password"
                            placeholder="Enter your password"
                            name="password"
                            value={this.state.password}
                            onChange={this.passwordHandler}
                            required
                             />
                    </Form.Group>

                    <Form.Group>
                        <Form.Label>Gender</Form.Label>
                        <Form.Control as="select"
                            name="gender"
                            onChange={this.genderHandler}
                            defaultValue="Select Gender">
                            <option defaultValue>Select Gender</option>
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                        </Form.Control>
                    </Form.Group>

                    <Form.Group>
                        <Form.Label>Mobile number</Form.Label>
                        <Form.Control
                            type="number"
                            placeholder="Enter your mobile number"
                            onChange={this.mobileHandler}
                            name="mobile"
                            value={this.state.mobile}
                            required
                            />
                    </Form.Group>

                    <br></br>
                    <Button type="submit">Submit</Button>
                </Form>
            </div>
        )
    }
}
export default Signup;