My form does not accept the input value from a user - reactjs

Question

I have a login form i created with react-strap I am facing a problem with input value, the form behave as readonly for the first input of email but accept the second input of the password.
I have tried to delete the email field to trace if the password field will fail to accept input but it worked perfect
I have attached my component code, Please i will appreciate anyone who can help to solve this problem
import React, { Component } from 'react';
import { Button, Card, CardBody, Col, Container, Form, Input, InputGroup, Row } from
'reactstrap';
import './Login.css'
class Login extends Component {
constructor(props) {
super(props)
this.state = {
email:'',
password:''
}
}
changeHandler = (e) =>{
this.setState({[e.target.name]:e.target.value });
}
onSubmit = (e) =>{
e.preventDefault();
fetch('http://localhost:5000/user/login',{
method:'POST',
body:JSON.stringify(this.state),
})
.then(response =>{
if(response.status === 200){
this.props.history.push('/')
}else{
const error = new Error(response.error);
throw error;
}
})
.catch(err=>{
console.error(err);
alert('Ooops! Login failed please check your email and password, then try again')
})
}
render() {
return (
<div className="app flex-row align-items-center">
<Container className="container">
<Row className="justify-content-center">
<Col md="12" lg="10" xl="8">
<Card className="mx-4">
<CardBody className="p-4">
<Form onSubmit={this.onSubmit} className="login-form">
<h1>Login Form</h1>
<InputGroup className="mb-3">
<Input type="email "
name="email "
required="required"
placeholder="email "
value={this.state.email }
onChange={this.changeHandler}
/>
</InputGroup>
<InputGroup className="mb-3">
<Input type="password"
name="password"
required="required"
placeholder="Password"
value={this.state.password}
onChange={this.changeHandler}
/>
</InputGroup>
<Row>
<Col xs="12" sm="6">
<Button type="submit" className="btn btn-info mb-1" block><span>Login</span>
</Button>
Home
</Col>
</Row>
</Form>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
)
}
}
export default Login;

Answer 1

The issue is you have a space in your input name:
<Input type="email "
name="email "
^ remove this space
As a result of that, your change handler fails to set the state because it's setting "email " not "email".
You also have a space in your input type and placeholder.

Answer 2

The problem may be in changeHandler. As you pass it to a input like
onChange={this.changeHandler}
The this in
changeHandler = (e) =>{
this.setState({[e.target.name]:e.target.value });
}
refers to input and not to Class component, so it does not update the state.
To fix this the problem you should bind the Class component this to changeHandler.
constructor(props) {
super(props);
this.state = {
email:'',
password:''
}
this.changeHandler = this.changeHandler.bind(this);
}
You may also read this article.