Authorization-Form.js

// Authorization Form
import React from 'react';
import ReactDOM from 'react-dom';

class Contact extends React.Component {
  
  // constructor method
  constructor(props) {
    super(props);
    this.state = {
      password: 'swordfish',
      authorized: false
    };
    this.authorize = this.authorize.bind(this);
  }

  // authorize method
  authorize(e) {
    const password = e.target.querySelector(
      'input[type="password"]').value;
    const auth = password == this.state.password;
    this.setState({
      authorized: auth
    });
  }
	
  // render method
  render() {
   	 // login variable
      const login = (
        <form action="#" onSubmit={this.authorize}>
          <input 
            type="password" 
            placeholder="Password" />
          <input type="submit" />
        </form>
  		);
    	// contact info variable
      const contactInfo = (
        <ul>
          <li>
            [email protected]
          </li>
          <li>
            555.555.5555
          </li>
        </ul>
      );
    	
    // return statement
    return (
      <div id="authorization">
        <h1>
  	{ this.state.authorized ? 'Contact' : 'Enter the Password' }
	</h1>
	{ this.state.authorized ? contactInfo : login }
        <ul>
          <li>
            [email protected]
          </li>
          <li>
            555.555.5555
          </li>
        </ul>
      </div>
    );
  }
}

ReactDOM.render(
  <Contact />, 
  document.getElementById('app')
);