CREATE A FRONT-END APP WITH REACT Authorization Form

Hey everyone
I am trying to do this project for the last two days, but I am not able to get the bug, After running the code there are no changes in my web page(like no form appears) only login appears and there is no option to click on or put the password.
please help me out.
Many thanks

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="#" onSubmit={this.authorize}> <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>{this.state.authorized? 'Contact':'Enter the password'}</h1> {this.state.authorized ? 'contactInfo' : 'login'} </div> ) } } ReactDOM.render( <Contact />, document.getElementById('app') );

I dont know if this matters but i do not have semi colons on my code. Try removing from line 33 and 45.

Also for your ternary you have ‘contactInfo’ and ‘login’ as strings. Try taking out the quotes? Hope it works.

Hello
i have worked on the same code as your using the emulation app of codeCademy and my visual studio env(s). both worked well. can you please state under which env you are running your code. in visual studio, you have to install react with json. regards

I have copied your code and it worked well. so it has no issues with syntax or logic. it seems has to do with react lib module. check well your env under which you are trying to load REACT.

thank you so much for your reply. I apologize for taking so much time to getting back to you

I removed semicolons but still not working

I am running code in code academy app only. do I need to install react application if I want to run it in vs code?

you are all set. no need to install anything. you can reload the site from time to time to ensure you are still connected to codecademy though.

thank you for your reply but my code still not working?

Hi Flichi
it’s working now, the problem was in
{this.state.authorized ? ‘contactInfo’ : ‘login’}
it should be without semicolons

excellent. but {this.state.authorized ? ‘contactInfo’ : ‘login’} in your first question was without semi-colon. please check as well my part of the code:

{this.state.authorized ? contactInfo : login}

{this.state.authorized ? 'contactInfo' : 'login'}
  </div>

it could be something else as i have noticed as codecademy uses a technique to check your answer and possibly a point or comma mistakenly inserted can be hardly seen. so you need to delete your code and restart to rewrite. all the best.

yeah I think you are right. thanks a lot for your help