LowPriorityQuestion React

Tell us what’s happening:

  1. Just completed the challenge and pasted the code into a codepen, added a cloudflare cdnjs and am wondering what else it needs in order to render in that or any environment outside of FCC’s editor.
  2. The codepen editor is showing an error on line
    24
<div> //Uncaught SyntaxError: Unexpected token '<' 

Does the JS editor not like the html <div>? Should I separate it all out? Migrate it all to html editor or it there syntax to do that like {} for JS?

I’m reviewing React before doing the Markdown project and this seems to be basically what my project will be doing. Thanks for any advice/insights. My goal is to understand it and build a foundation rather than just rush thought the project.

Your code so far

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      submit: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  handleSubmit(event) {
    event.preventDefault()
    this.setState({
      submit: this.state.input
    });
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            value={this.state.input}
            onChange={this.handleChange} />
          <button type='submit'>Submit!</button>
        </form>
        <h1>{this.state.submit}</h1>
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

Challenge: Create a Controlled Form

Link to the challenge:

Hi @magopolis,

You forgot several things:

  1. Import react-dom
  2. Select Babel as a transpiler
  3. Create a div in HTML that will render your app <div id="root"></div>
  4. Tell ReactDOM where to render your app ReactDOM.render(<MyForm />, document.getElementById('root'))

Its all coming back to me. I think React will just take a lot of repetition.

1 Like

@magopolis No worries! At some point, you will memorize it. Or at least switch to create-react-app or NextJS that will do it for you :slight_smile:

I would highly suggest using Codesandbox for React code and not Codepen.

1 Like

I’m on this site looking at ReactDOM <script>tags. Any recommendations?

Just start typing “react-dom” in here:

After it is added, add ReactDOM.render(<MyForm />, document.getElementById('root')) line to the end of your JS file.

Ok thanks, I was looking at the “packages” section below that. I’m not going down that rabbit hole yet, HAHA

1 Like