Authorization-Form Doesn't Render After Submit

Web Development Full-Stack
1

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')
);
2

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

1 Like
3

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

1 Like
4

you have onSumbit, instead of onSubmit

1 Like
5

Hi all! I can see you were all working on this task only a few months ago. I have just come to it and discovered that the content has changed. There’s a new thread going over here who are also experiencing the same issues.

Our finished code looks like this and doesn’t work:

import React, { useState } from 'react';

function Contact() {
  const password = 'swordfish';
  const [authorized, setAuthorized] = useState(false);

  function handleSubmit(e) {
    const enteredPassword = e.target.querySelector(
      'input[type="password"]').value;
    const auth = enteredPassword == password;
    setAuthorized(auth)
    
  const login = (
    <form action="#" onSubmit={handleSubmit}>
      <input 
        type="password"
        placeholder="Password"
      />
      <input 
        type="submit"
      />
    </form>
  );

  const contactInfo = (
        <ul>
          <li>
            [email protected]
          </li>
          <li>
            555.555.5555
          </li>
        </ul>
  );
  }

  return (
      <div id="authorization">
        <h1>
        {
        authorized ? 'Contact' : 'Enter the Password'
        }
        </h1>
        {
        authorized ? contactInfo : login
        }
      </div>
  );
}

export default Contact;

We have no code around Components and rendering which makes it super confusing after the previous lesson covering all those topics.

If anyone can see if this should still work, please let me know :sweat_smile: