Unable to type password in input box

Question

I am creating a simple login page. When I declared states and tried to use them in input field's value, I am unable to enter or type anything in the input box.

This problem is occurring only with password input box, email input box is working fine.

export default class SignIn extends Component{
    constructor(props){
        super(props)
        this.state = {
            email:'',
            password:''
        };
        this.handleEmailChange = this.handleEmailChange.bind(this);
        this.handlePasswordChange = this.handlePasswordChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        };
        handleEmailChange(event) {
            this.setState({email: event.target.value});
            console.log(this.state.email)
        }
        handlePasswordChange(event) {
            this.setState({Password: event.target.value});
            console.log(this.state.password)
        }
        handleSubmit(event) {
            event.preventDefault();
            const fdata = new FormData()
            fdata.append('email',this.state.email)
            fdata.append('password',this.state.password)
            axios({
                method: 'post',
                url: 'abc.com/abc',
                data: fdata
            })
            .then(function(response){
                console.log(response)
                response.json()
            })
            .then(function(responseJson){
                console.log(responseJson)
            })
            .catch(function(){
                alert("Failed")
            })
        }
    render(){
        return(
            <div>
                <div className="container mt-5">
                <form action="/action_page.php">
                    <div className="form-group">
                    <label htmlFor="email">Email:</label>
                    <input  type="email"
                            value={this.state.email}
                            onChange={this.handleEmailChange}
                            className="form-control" 
                            id="email"
                            placeholder="Enter email" 
                            name="email" />
                    </div>
                    <div className="form-group">
                    <label htmlFor="pwd">Password:</label>
                    <input  type="password"
                            value={this.state.password}
                            onChange={this.handlePasswordChange}
                            className="form-control" 
                            id="pwd" 
                            placeholder="Enter password" 
                            name="pswd" />
                    </div>
<button type="submit" onClick={this.handleSubmit}>Submit</button>
                </form>
                </div>
            </div>
        )
    }
}

I expect to use password state in input type password, and don't want to use any default value.

Answer 1

You have a typo in your function:

handlePasswordChange(event) {
    this.setState({Password: event.target.value}); 
    // should be 
    this.setState({password: event.target.value}); 
    console.log(this.state.
}

Answer 2

change Password to password in setState

your code

handlePasswordChange(event) {
                this.setState({Password: event.target.value});
                console.log(this.state.password)
            }

new code

handlePasswordChange(event) {
                this.setState({password: event.target.value});
                console.log(this.state.password)
            }