Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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() {
- let title;
- if (this.state.authorized) {
- title = 'Contact';
- } else {
- title = 'Enter the Password';
- }
- const login = (
- <form action="#" onSubmit={this.authorize}>
- <input type="password"/>
- <input type="submit"/>
- </form>
- );
- const contactInfo = (
- <ul>
- <li>
- client@example.com
- </li>
- <li>
- 555.555.5555
- </li>
- </ul>
- );
- return (
- <div id="authorization">
- <h1>{title}</h1>
- {this.state.authorized ? contactInfo : login}
- </div>
- );
- }
- }
- ReactDOM.render(
- <Contact />,
- document.getElementById('app')
- );
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement