Tushar Khanna Tushar Khanna - 2 months ago 20
React JSX Question

On Click of a Button made in one component is not changing value in other component in React.js

I am trying to make Button to Increment a value in React.js to learn communication between two components. One Component is just a Button showing +1 and other component is a Value that will be incremented on Click of that button.

I have written this code but not able to find why value is not being displayed.

Note: I have just one day of experience in React.js.

Here is my code:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">

</head>

<body>
<div id="root"></div>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/remarkable@1.6.2/dist/remarkable.min.js"></script>

<script type="text/babel">
var Button = React.createClass({
render : function(){
return (
<button>+1</button>
)
}
});

var Counter = React.createClass({
render : function(){
return (<div>Hello {this.props.updValue}</div>);
}
});

var App = React.createClass({
getInitialState : function(){
return {count : 0 };
},
increment : function(){
this.setState({counter:this.state.count + 1});
},
render: function(){
return (
<div>
<Button onClick={this.increment} updValue={this.state.count}/>
<Counter />
</div>
);
}
});

ReactDOM.render(<App />,document.getElementById("root"));
</script>
</body>

</html>


( https://plnkr.co/edit/1CmLxDShG5VushZTs54Q )

Answer

Please check out this demo: http://codepen.io/PiotrBerebecki/pen/NRdAON and the React code below.

The problems that I've noticed in your code:

  • In the increment() function you used
    this.setState({counter:this.state.count + 1}); and it should be this.setState({count:this.state.count + 1});
  • In the App render method you used the onClick event. This should be in the render method of the Button component itself.
  • You also need a prop (which I named for clarity reasons passClick) passed from parent (App) to a child (Button). The Button can then use this prop in its handleClick() method. This will be then received by the App invoking the increment() method.

React code:

var Button = React.createClass({
  handleClick: function() {
    console.log('1. Received click in Button');
    this.props.passClick();
  },
  render: function() {
    return (
      <button onClick={this.handleClick} >+1</button>
    )
  }
});

var Counter = React.createClass({
  render: function() {
    return (<div>Hello {this.props.updValue}</div>);
  }
});

var App = React.createClass({
  getInitialState: function() {
    return {
      count: 0
    };
  },
  increment: function() {
    this.setState({
      count: this.state.count + 1
    });
    console.log('2. Received click in App');

  },
  render: function() {
    return (
      <div>
        <Button passClick={this.increment}/>
        <Counter updValue={this.state.count}/>
      </div>
    );
  }
});