Ndtyjky

I am trying to create a login form which validates data by fetching API data. Here I am getting data of Star Wars heroes where username will be their name and password will be their birth year.

My code is:

class LoginPage extends Component{



    constructor(props){

        super(props);

        this.state={

            username:'',

            password:'',

            data:null

        }

        this.hadleUsername=this.hadleUsername.bind(this);

        this.handlePass=this.handlePass.bind(this);

    }



    hadleUsername(e){

        this.setState({username:e.target.value})

    }



    handlePass(e){

        this.setState({password:e.target.value})

    }



    submit(e){

        console.log(this.state.data);

        if(this.state.data!=null){

            this.state.data.results.map(data=>{

                if(data.name===this.state.username && data.birth_year===this.state.password){

                    return <Redirect to='/info/'/>

                }

            });

        }

    }



    async componentDidMount(){

        const response = await fetch('https://swapi.co/api/people/');

        const json = await response.json();

        this.setState({data:json});

    }



    render(){

        return(

            <form className='login-container'>

                <h3>Login Page</h3>

                <label>Username:</label>

                <input

                    type='text'

                    value={this.state.username}

                    placeholder='username'

                    onChange={this.hadleUsername}

                />

                <br/><br/>

                <label>Password:</label>

                <input

                    type='password'

                    value={this.state.password}

                    placeholder='password'

                    onChange={this.handlePass}

                />

                <br/><br/>

                <button type='submit' onClick={this.submit.bind(this)}>submit</button>

            </form>

        )

    }

}

Is there a better way to do it?