Dear all,
I’m stuck with the following exercise: authorization-form-project
After clicking on the Submit button, the page doesn’t seem to re-render, and thus no contact information is shown.
I tries a console.log statement within the render () method to see what happens in my google chrome console and nothing is showing up after clicking on Submit. Also I can’t find any problems within my code.
Would anyone help me to make the code work?
import React from 'react';
import ReactDOM from 'react-dom';
class Contact extends React.Component {
constructor(props) {
super(props);
this.state = {
password: 'swordfish',
authorized: false
};
this.authorize = this.authorize.bind(this);
}
authorize(e) {
const password = e.target.querySelector(
'input[type="password"]').value;
const auth = password == this.state.password;
this.setState({
authorized: auth
});
}
render() {
const login = (
<form
action="#"
onSumbit={this.authorize} >
<input
type="password"
placeholder="Password" />
<input type = "submit" />
</form>
);
const contactInfo = (
<ul>
<li>
[email protected]
</li>
<li>
555.555.5555
</li>
</ul>
);
// console.log(`The current state is: ${this.state.authorized}`);
return (
<div id="authorization">
<h1>{this.state.authorized ? "Contact" : "Enter the Password"}</h1>
{ this.state.authorized ? contactInfo : login }
</div>
);
};
}
ReactDOM.render(
<Contact />,
document.getElementById('app')
);