4

I am trying to run a basic React Component in CodePen (I enabled Babel and I used React.Component ) but it still does not render. In the console it shows React not defined. I also took some already rendered code from another person and it does not work!!

class App extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      term : ""

    }

    this.handleChange=this.handleChange.bind(this)

  }

  handleChange(event){
    let term = event.target.value;
    this.setState({term})

  }


  render() {
    return (
      <div className="App">
        <input value={this.state.term}  onChange={this.handleChange} />
        {this.state.term}
      </div>
    );
  }
}

ReactDOM.render(<App/> , document.getElementById("app"))
2
  • 1
    Have you added Babel, React and ReactDOM? Commented Mar 6, 2018 at 13:16
  • 1
    I found the issue the CDN link was not working. Anyone who has the same issue should add React and ReactDOM through QUICK ADD on Pen Settings Commented Mar 6, 2018 at 13:20

2 Answers 2

6

Follow these steps:

  1. Click Settings at the top.
  2. Select the JavaScript tab, and add "Babel" as the JavaScript preprocessor.
  3. In the "quick add" drop-down, select "React" and "ReactDOM".
  4. Paste your React code in the Javascript section.
  5. Add <div id="app"></div> in the HTML section.

Voila!

Sign up to request clarification or add additional context in comments.

1 Comment

I searched for React and ReactDOM and selected the first option from the result in case. It worked.
1

I was still getting the same error even though I had everything correctly added as Chris's response above.

But adding React@18 version resolved it. React 18.3.1 was automatically detected if you add cdn straight from codepan search. Which was found to be causing an issue.

To add cdn manually > Google "react cdn" then copy react & react-dom cdn links from react website to codepan js settings > save changes

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.