React.js code runs in local server but not in Plunker

Question

I am trying to follow a simple tutorials. My test code runs perfectly in my local server. But when I try to adapt the code to Plunker, it cause an error that I couldn't figure out why. The code runs fine in Snippet. Maybe I miss something. Plz help. :(

const Timer = ({currentValue}) => {
  return(
    <div className="Time">
      {currentValue}
    </div>
  );
};

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

    this.state = {currentValue: 150};

    setInterval(
      () => {
        this.setState({currentValue: this.state.currentValue - 1});
      }, 1000
    );
  }
// This cause an Unknown error in Plunker
  resetTimer = () => {
      this.setState({currentValue:150});
  };

  render() {
    return (
      <div className="App">
        <Timer currentValue={this.state.currentValue} />
        <button onClick={this.resetTimer}>Reset</button>
      </div>
    );
  }
}

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

<!DOCTYPE html>
<html>

  <head>
    <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
    <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react-dom.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="example"></div>
    <script src="script.js"></script>
  </body>

</html>

provide the plunker link of ur code. – Mayank Shukla Jan 24 '17 at 10:09 — Mayank Shukla, Jan 24 '17 at 10:09
The plunker link: https://plnkr.co/wi4sFLCnNU9UPKYvF9dB – Dr.Dean Jan 24 '17 at 10:14 — Dr.Dean, Jan 24 '17 at 10:14

Mayank Shukla · Accepted Answer · 2017-01-24T10:43:08.803

0

Ur code is proper, don't know why it is not working on plunker, same code is working on Jsfiddle, you can try this alternative, bind the onClick method manually, it will work, Try this:

const Timer = ({currentValue}) => {
  return(
    <div className="Time">
      {currentValue}
    </div>
  );
};

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

    this.state = {currentValue: 150};

    setInterval(
      () => {
        this.setState({currentValue: this.state.currentValue - 1});
      }, 1000
    );
  }
  resetTimer(){
      this.setState({currentValue:150});
  };

  render() {
    return (
      <div className="App">
        <Timer currentValue={this.state.currentValue} />
        <button onClick={this.resetTimer.bind(this)}>Reset</button>
      </div>
    );
  }
}

Check the Working Code on-

plunker code: https://plnkr.co/edit/NZPKuTdnIvL75IKgApFZ?p=preview

jsfiddle: https://jsfiddle.net/ypt9q7p6/

edited Jan 24 '17 at 10:43

answered Jan 24 '17 at 10:18

Mayank Shukla

100,735
18
158
142

ur code was proper, check this on `jsfiddle` https://jsfiddle.net/ypt9q7p6/ . Whatever i wrote was an alternative of that. I manually bind the onClick method, arrow function used to do it for u, you don't need to do it manually. – Mayank Shukla Jan 24 '17 at 10:34
Thanks, I got this. Describe bind(this) in the constructor works too :) – Dr.Dean Jan 24 '17 at 15:04
i was in hurry so just provided u a working code :), it should be defined in constructor for performance improvement, check the link how it affects the performance: http://stackoverflow.com/questions/31294494/react-js-and-es6-any-reason-not-to-bind-a-function-in-the-constructor – Mayank Shukla Jan 24 '17 at 15:07

React.js code runs in local server but not in Plunker

1 Answers1