0

I am new in React. I would ask some question about my code while I am learning about event on ReactJs. The code is like below :

import React from 'react';

class VisualComponents extends React.Component {
  render() {
    return (
      <Buttons />
    )
  }
}

class Buttons extends React.Component{ 
  state = {clicks1: 0, clicks2: 0};

  updateButton1() {
    this.setState((prevState) => {       
         clicks1: prevState.clicks1 += 1;       
       });

    console.log(this.state.clicks1);
  }


  render(){
    return (
      <div>
        <button onClick={this.updateButton1.bind(this)}>
          {this.state.clicks1}
        </button>    
    )
  }
}

Then I put that code to main.js below :

import React from 'react';
import ReactDOM from 'react-dom';


import VisualComponents from './Components/Visual';
import registerServiceWorker from './registerServiceWorker';

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

registerServiceWorker();

My question is, why the text of button does not change when I clicked the button ? It supposed to be like counter, but it is not. Thank You.

nomib
  • 29
  • 6
  • wrong assignment prevState.clicks1 =+ 1; use prevState.clicks1 += 1; – Javed Shaikh Feb 26 '18 at 12:09
  • You forgot to export `VisualComponents`. You have to do `export default class VisualComponents extends React.Component {` – Damien Feb 26 '18 at 12:20
  • sorry little missing in my code posting. I've done it already with export default VisualComponents; in end of file – nomib Feb 26 '18 at 14:12

0 Answers0