Part 1: Authorization Form Project / Browser not displaying my code for final step


#1

Latest version of chrome.
It’s been working fine in other exercises.

Went through my code many times looking for errors. I’m a beginner so it’s very possible I have an error somewhere that is causing it to not display.

Would love to be pointed in the right direction!

import React from 'react';
import ReactDOM from 'react-dom';

class Contact extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            password: 'swordfish',
            authorized: true
        };
        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>
        );

        var contactInfo = (
            <ul>
                <li>
                    client@example.com
                </li>
                <li>
                    555.555.5555
                </li>
            </ul>
        );
        return (
            <div id="authorization">

                <h1> { this.state.authorized == true ? 'Contact' : 'Enter the Password' }</h1>
                { this.state.authorized == true ? contactInfo : login }
            </div>
        );
    }
});
ReactDOM.render(
    <Contact />,
    document.getElementById('app')
);

#2

i used a debug lint (create-react-app, i can highly recommend you to set this up on your PC as well), which gives me:

which is right, the ) at line 50 does not have a matching (.


#3

that was definitely my problem.

Thank you! I’m not sure how to setup a debug lint with atom (is that where?) - but i’ll do some research.


#4

atom is just a text-editor, how do transpile reactJS to Javascript? A atom plugin?


#5

figured it out, found an atom package with react linting!


#6

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