Incrementing react values

Question

I am very new to reactJS. I am trying to make a button and increase the value value within the text.I am trying to make a button that increments the value through react and displays

import React from 'react'
import ReactDom from 'react-dom'

class App extends React.Component {

   constructor(props){
       super(props);
       this.state = {counter: 1}
   }


 increment (e) {
   e.preventDefault();
   this.setState({
   counter : this.state.counter + 1
   });
 }

   render() {
    return  <button onClick={this.increment}> "this is a button " + {this.state.counter} </button>
   }

}

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

Answer 1

You need to bind increment function properly

class App extends React.Component {
   constructor(props){
       super(props);
       this.state = {counter: 1}
   }


 increment(e){
   e.preventDefault();
   this.setState({
   counter : this.state.counter + 1
   });
 }

   render() {
    return  <button onClick={(e)=>this.increment(e)}> this is a button {this.state.counter} </button>
   }

}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='app'></div>