CODEWITHSUNDEEP
reactjs
Yanshof
Yanshof

Reputation: 9926

My code get error element on function call ( code attached )

I want to create couple of button that each click the value of the button will be add

this is what i got

enter image description here

what i did wronge ? What is "object Object" ? 

var Button = React.createClass({


localHandleClick: function(){
    this.props.localHandleClick(this.props.increment);     // get the     increment value of each button 
  },

  render: function(){
    return(
      <button onClick={this.props.localHandleClick }>+{this.props.increment}</button>     // this mean use this counter element 
    )
  }
});




var Result = React.createClass({
  render: function(){
    return(
      <div>{this.props.localCounter}</div>
    )
  }
})





// to include Result => we define Main component 
var Main = React.createClass({

  getInitialState: function(){
    return {counter: 0};           // start from 0 
  },

  // will receive argument 
  handleClick: function(increment){
    this.setState({ counter: this.state.counter+increment });   // read the state and add 1 to value
  }, 

  render: function(){
    return(
      <div>
        <Button localHandleClick={this.handleClick} increment={1}  />
        <Button localHandleClick={this.handleClick} increment={5}  />
        <Button localHandleClick={this.handleClick} increment={10} />
        <Button localHandleClick={this.handleClick} increment={15} />
        <Button localHandleClick={this.handleClick} increment={20} />
        <Result localCounter={this.state.counter} />
      </div>
    )
  }
})

React.render(<Main />, document.getElementById("root"));

Upvotes: 0

Views: 26

Answers (1)

developer
developer

Reputation: 728

you need to bind your values, rather than set as a property

<Button localHandleClick={this.handleClick.bind(this, 1)} increment={1}/>
 <Button localHandleClick={this.handleClick.bind(this, 5}  increment={5}/>
 <Button localHandleClick={this.handleClick.bind(this, 10)} increment={10}/>
 <Button localHandleClick={this.handleClick.bind(this, 15}  increment={15}/>

etc...

so that is is passed to the function. the properties of the Button component arent passed.

Upvotes: 1

Related Questions