From React Challenges- Replicate to codepen

From React Challenges- Replicate to codepen
0

#1

Tell us what’s happening:
I want to replicate this challenge to play with on codepen, i have the react.min.js and the react-dom enabled. Nothing is happening on the screen. How can I recreate the same counter on codepen? thank you

Your code so far


class OnlyEvens extends React.Component {
  constructor(props) {
    super(props);
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('Should I update?');
     // change code below this line
if (nextProps.value % 2===0){
  return true;
}
     // change code above this line
  }
  componentWillReceiveProps(nextProps) {
    console.log('Receiving new props...');
  }
  componentDidUpdate() {
    console.log('Component re-rendered.');
  }
  render() {
    return <h1>{this.props.value}</h1>
  }
};

class Controller extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    };
    this.addValue = this.addValue.bind(this);
  }
  addValue() {
    this.setState({
      value: this.state.value + 1
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.addValue}>Add</button>
        <OnlyEvens value={this.state.value}/>
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate


#2

Did you add Babel as a JavaScript Preprocessor under the JavaScript settings?

Also, I do not see where you have used ReactDOM.render where you tell React where to put the Controller component.

You will also need an element in the HTML section with the same id as you specify in the ReactDOM.render method.

If you still have trouble after implementing what I have suggested here, then post a link to your pen, so we can have a look at your settings and code.


#3

You also need a line that connects your React to the HTML, a line at the end your your code like:

ReactDOM.render(<Controller />, document.getElementById("app"));

This would link to the html code like:

<div id="app"></div>

There is a working example in this pen.

Cute username, by the way.


#4

Thanks its working, will send you all a link if i build something better out of it than just copy the fcc challenge.


#5

Also, I do not see where you have used ReactDOM.render where you tell React where to put the Controller component.

Your solution was good, kevin’s just required me to think less, I rewarded him for spoon feeding. Err