React component not working

Question

I am trying to make a counter but for some reason my code does not work and I really do not know what else to do. If I click on a button with value of 1, the H1 should automatically change.

When I inspect the page, I see the error that you can see in my screenshot

Is there anything wrong in my code perhaps that I cannot see?

<div id="app"></div>

<script type="text/babel">

var CounterChallenge = React.createClass({

    getInitialState: function(){
        return{
            count: 0
        }
    },

    incrementCount: function(value){
        this.setState({
            count: this.state.count + value
        })
    },

    getDefaultProps: function(){
        return{
            valueOne: 1,
            valueTwo: 5,
            valueThree: 10
        }
    },

    render: function() {
        return(
            <div>
                 <h1>Count: {this.state.count}</h1>
                <Button value={this.props.valueOne} clickHandler={this.incrementCount.bind(this, this.props.valueOne)}>Add {props.valueOne}</Button>
                <Button value={this.props.valueTwo} clickHandler={this.incrementCount.bind(this, this.props.valueTwo)}>Add {props.valueTwo}</Button>
                <Button value={this.props.valueThree} clickHandler={this.incrementCount.bind(this, this.props.valueThree)}>Add {props.valueThree}</Button>
            </div>
        )
    }
});

var Button = function(props){
    return(
        <button value={props.value} onClick={this.clickHandler}> Add {props.value}</button>
    )   

};

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

Try changing onClick={this.clickHandler} to onClick={props.clickHandler} — Brandon
– Brandon, Commented Sep 22, 2017 at 21:13
@Brandon. In fact that was the reason why the buttons were not working. Appreciate the support — Sidney Sousa
– Sidney Sousa, Commented Sep 22, 2017 at 21:18

steliosbl · Accepted Answer · 2017-09-22 21:19:06Z

3

From the error you have posted, the problem appears to be with the content of each Button component:

Add {props.valueOne}

props here is undefined. I think you meant this.props.valueOne.

Also, you enter the content into the buttons twice. Once here:

<Button value={this.props.valueOne}>Add {props.valueOne}</Button>

And then again in the actual component:

var Button = function(props){
    return(
        <button value={props.value} onClick={this.clickHandler}> Add {props.value}</button>
    )   
};

EDIT: You also need to change the button's onClick to {this.props.clickHandler} instead of {this.clickHandler}, as the latter is undefined:

return(
    <button value={props.value} onClick={this.props.clickHandler}> Add {props.value}</button>
)

edited Sep 22, 2017 at 21:19

answered Sep 22, 2017 at 21:11

steliosbl

8,9275 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sidney Sousa Over a year ago

it helped. there is no error, but the buttons are not working. I change the button insede te render function for this: <Button value={this.props.valueOne} clickHandler={this.incrementCount.bind(this, this.props.valueOne)}/> But still it does not work

Sidney Sousa Over a year ago

Was waiting for 5min to vote on your answer. Appreciate the support

kadhar · Accepted Answer · 2017-09-22 21:25:06Z

Check this url https://jsfiddle.net/navceasw/ if you are trying to achieve something similar

var CounterChallenge = React.createClass({

getInitialState: function(){
    return{
        count: 0
    }
},

incrementCount: function(value){
    this.setState({
        count: this.state.count + value
    })
},

getDefaultProps: function(){
    return{
        valueOne: 1,
        valueTwo: 5,
        valueThree: 10
    }
},

render: function() {
    const { valueOne, valueTwo, valueThree } = this.props;
    const { count } = this.state;
    return(
        <div>
            <Button value={valueOne} clickHandler={this.incrementCount.bind(this, valueOne)}>Add {valueOne}</Button>
            <Button value={valueTwo} clickHandler={this.incrementCount.bind(this, valueTwo)}>Add {valueTwo}</Button>
            <Button value={valueThree} clickHandler={this.incrementCount.bind(this, valueThree)}>Add {valueThree}</Button>
            <div>
                Counter Value : { count }
            </div>
        </div>
    )
  }
});

var Button = ({ value, clickHandler, children }) => {
   return(
    <button value={value} onClick={clickHandler}> { children } </button>
  )   

};

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

Collectives™ on Stack Overflow

React component not working

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related