Front End Development: Authorization Form

[hdusty]

I’m currently working on this Front End Development React Components Project: Authorization Form.

Based on the previous forum questions about this project, it looks like the content has changed since a question about it was last asked. Even the walkthrough video shows the project with different steps.

I followed the steps in my version of the project and they seemed to be working up through step 3, but following step 7 everything that was rendered disappears from the browser.

Here is my code:

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;

Can anyone tell where I’m going wrong? Or is there a bug with this project? I’ve already reported that the walkthrough no longer matches the project.

Thanks!

[scott0hand]

sorry no answer, but not sure if my reply will bump this up to get a response as i’m going through a similar problem with the walkthrough not matching the file. if it helps at all this is my code and it’s not rendering

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 = (




)

const contactInfo = (

);

return (

{authorized == false ? “Enter the Password” : “Contact”}

{ authorized ? contactInfo : login }

• 
  [email protected]
  


• 
  555.555.5555
  

);
}

export default Contact;

[rswainson]

Looks like we’re all at the same point in this project and just gone eh?! Glad it’s not just me!!

I was so confused to open up the task to discover that we weren’t going to use any components and rendering despite the previous lessons being all about that!

My code looks exactly the same as yours and they same thing happened to me too!

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;

Let’s hope they fix it soon!

[mirja_t]

This project seems to be rather messed up. Hitting save did not seem to make any difference to what’s being rendered. So I tested if the project is even compiled by removing the Contact component from the App component and replacing it with a simple paragraph. It did not change from what’s being rendered either:

[rswainson]

Yeah I saw you’d posted this too! It seems as if this portion of the course is being amended but without any heads up!

[realkennylin]

Hey y’all, apologies!
We’re actually right now looking over our React content and getting ready for a big update.

It looks like this project got updated before intended, so we reverted back to the existing version.
Again, sorry for the mix-up and confusion!

[hdusty]

Thanks for updating us and fixing the issue!

When do you guys expect to roll out the React updates? Are there any other sections we should expect updates in as well?

I’m working through the Full Stack Engineer curriculum and want to make sure I don’t miss anything!

Update: I went back and looked at the Authorization Form project and the code itself is updated, but the instructions side of things still seems to be referring to the old instructions with “useState()” and such. I reset the workspace, but the instructions still remain the same.

[rswainson]

Hey!

Thanks for the update!! Same question as @hdusty as I’m also on the Full Stack Engineer path, would be good to know when it’s updated to go back and refresh with the new content?

[jfrancis23]

Haha i knew i wasn’t going crazy looking at that walkthrough video Look forward to more react stuff!

[jiwon.shin]

Thanks for catching this! The instructions should also be reverted to the existing version!

[realkennylin]

Hi @rswainson,

Sorry about the delay, I didn’t see a notification.

The instructions and the code have been reverted already!

For more updated React content, we’re working hard on it and hope to have it out by early April.

[vverhovi]

Hi!

Just wondering if you manage to find the problem in your code after Codecademy updated React course? I’m still struggling and dunno what is the problem. The form just keep disappearing after step 3.

[leticiaperdomenico]

I am having the same issue, I tried with all the answers in here, but still can’t solve it. after adding const login and const contactInfo, stops showing an answer and in console I have a 500 error. plus login is not defined in index.compiled.js in different lines.

[hdusty]

I just went back to this project to check and my browser is still rendering nothing. Looks like I must have decided to just move on. If anyone else has identified the issue here, please let us know!

[net5533575016]

The error is “caught TypeError: Cannot read properties of null (reading ‘value’)” at line:

const enteredPassword = e.target.querySelector(
      'input[type="password"]').value;

This is their own event handler function and the code is incorrect. It should be:

const enteredPassword = document.querySelector(
      'input[type="password"]').value;

I ran this and it worked fine. I will submit a bug