Unexpect token '<'

import React from "https://cdn.skypack.dev/react";
import { render } from "https://cdn.skypack.dev/react-dom";
import { Pet } from './Pet';


const defaultMark = "hello world";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mymarkdown: defaultMark,
    }
  }
  // Add handleChange() and submitMessage() methods here
  handleChange(event){
    this.setState({
      input: event.target.value
    })
  }
  submitMessage(event){
    this.setState({
      messages: [...this.state.messages, this.state.input],
      input: ''
    })
  }
  render() {
    return (
      <div> <----------"Uncaught SyntaxError: Unexpected token '<' - WHAT THE F
        <h2>Type in a new Message:</h2>
          <input 
            onChange = {this.handleChange.bind(this)} 
            value={this.state.mymarkdown}
          />
          <button onClick = {this.submitMessage.bind(this)}>Add message</button>
          <ul>
             
                  <li>"hello"</li>
              
          </ul>
      </div>
    );
  }
};

ReactDOM.render(<App />, document.getElementById('app'));



Would you mind sharing a bit more context? Is that an fCC challenge?

Hello!

You just need to change the settings. Add Babel as the preprocessor and it should work:

image

Just as an aside. I would recommend using CodeSandbox for React.

1 Like

Thank you sooo much! GOD that was frustrating lol

1 Like

stackbiltz is great too!

1 Like