Authorization-Form Doesn't Render After Submit

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>
          client@example.com
        </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')
);

Your code works for me as well, maybe try resetting the exercise, reloading the page, and clearing your browser cache.

1 Like

Thanks Vic for the confirmation! My hypothesis is that it was due to a slow internet connection. Cheers!

1 Like