onClick event doesn't act in ReactJS

Question

I have a react code where I have onClicke event. I suppose to get implementation of function(someFunction). I didn't get any error running this code, everything else works. I guess the problem can be in function. The React code is

    class Hello extends Component {
  constructor() {
    super();
    this.num = { number: 4 };
    this.someFunction = this.someFunction.bind(this);
  }

  someFunction() { this.setState({ number: this.num.number + 3 }); }

  render() {
    const coco = {
      color: 'blue',
      background: 'yellow',
      width: '200px',
      height: '200px',
      padding: 'lem'
    };

    return (<div style={coco} onClick={this.someFunction}>
      <p style={coco} onClick={this.someFunction}> bly blya
        Hello {this.props.name} </p>
      <p style={coco} onClick={this.someFunction} >
        Current count: {this.num.number + 3}
      </p>
    </div>)
  }
}

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

Answer 1

You should replace:

Current count: {this.num.number + 3} 

with:

Current count: {this.state.num.number + 3}

Answer 2

Instead of defining this.num , you should define the initial state of your component in the constructor:

this.state = {
  number: 4,
};

Your function gets correctly called on the click callback, however the logic of updating the state doesn't work because it always returns the same state. this.num.number always has a value of 4 and thus your state will always have a value of 7 after calling setState .

You can use the previous state to calculate the new state like this:

this.setState((prevState) => {
    return {
        number: prevState.number + 3
    };
});

See this JSFiddle

Answer 3

actually it is working just fine , your component isn't updating because it doesn't depend on state in fact you havne't defined any state in the constructor which might be a typo ..

import React , {Component} from 'react'
import ReactDOM from 'react-dom'

class Hello extends Component {
  constructor() {
    super();
    // defining state 
    this.state = { number: 4  };
    this.someFunction = this.someFunction.bind(this);
  }

  someFunction() { 
    //chnaging state case re-render for component 
    this.setState({number: this.state.number + 3 }); 
  }

  render() {
    const coco = {
      color: 'blue',
      background: 'yellow',
      width: '200px',
      height: '200px',
      padding: 'lem'
    };

    return (
      <div style={coco} onClick={this.someFunction}>
        <p style={coco} onClick={this.someFunction}> bly blya
          Hello {this.props.name} </p>
        <p style={coco} onClick={this.someFunction} >
          Current count: {this.state.number + 3 /*need to use state here .  */}
        </p>
      </div>
    )
  }
}

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