React Project 'Authorization Form' problem

Hi!,

I’m tackling this project (https://www.codecademy.com/courses/react-101/projects/authorization-form).

My final code is this, but when I click the submit button after entering the right password - nothing changes (no contacts are displayed). When I change authorized to true manually - it’s displayed. Can anyone see the problem??? :slight_smile:

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 login = (
      <form action="#">
          <input type="password" placeholder='Password' />
          <input type='submit' onSubmit={this.authorize} />
      </form>
    );
    const contactInfo = (
      <ul>
          <li>client@example.com</li>
          <li>555.555.5555</li>
      </ul>
    );
    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')
);

Hello, @ajax8982210598, and welcome to the forums!

When you click the button nothing happens. What part of your code controls what is supposed to happen when the button is clicked? Hint: You may want to review instruction #8.

Thanks for the reply and a hint! I found the problem: submit event has to be assigned on the form, not input :slight_smile:

      <form action="#" onSubmit={this.authorize}>
          <input type="password" placeholder='Password' />
          <input type='submit' />
      </form>
1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.