Q: Unable to type password in input box 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.

A: 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)
            }


A: 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.
}

