Generic button component in reactjs

Question

I started play with React and I'm stuck with this sample.

Counter works but why onClick the BUTTON does not change key active in state and render correct button?

  const Button = ({label}) => (
    <button className="btn btn-primary">{label}</button>
);

const Counter = React.createClass({

    getInitialState: function () {
        return {
            counter: 0,
            active: false
        }
    },

    increment: function () {
        this.setState({
            counter: this.state.counter + 1
        })
    },

    change: function () {
       this.setState({
           active: true
       })
    },

    render: function () {
        return (
                <div>
                    <h1>Counter: {this.state.counter}</h1>
                    <button onClick={this.increment}>1+</button>}
                    {this.state.active ? 
                    <Button label="Sign OUT"/> :
                    <Button label="Sign in" onClick={this.change}/>}
                </div>
        )
    }
});

ReactDOM.render(<Counter/>, document.getElementById("root"))

Mayank Shukla · Accepted Answer · 2017-02-13 09:16:25Z

1

Because you forgot to define click event in Button Component use this:

const Button = (props) => (
    <button className="btn btn-primary" onClick={props.onClick}>{props.label}</button>
);

one more thing, you need to define the click event with signout button also, like this:

{this.state.active ? 
    <Button label="Sign OUT" onClick={this.change}/> : 
    <Button label="Sign in" onClick={this.change}/>
} 

change: function () {
    this.setState({
        active: !this.state.active
    })
}

Check working example:

jsfiddle: https://jsfiddle.net/mtbg3g59/

Codepen: http://codepen.io/anon/pen/WRLgpp

edited Feb 13, 2017 at 9:16

answered Feb 13, 2017 at 9:07

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

2 Comments

Darius Over a year ago

Thanks that help a lot

Mayank Shukla Over a year ago

glad, to help you :)

GhaziBenDahmane · Accepted Answer · 2017-02-13 09:06:39Z

1

Your button doesn't take a prop named onClick so it's normal t hat it does nothing, try to change its definition to this and it should work

const Button = ({label}, {onClick}) => (
    <button className="btn btn-primary" onClick={onClick}>{label}</button>
);

answered Feb 13, 2017 at 9:06

GhaziBenDahmane

5483 silver badges16 bronze badges

Comments

Jakob Lind · Accepted Answer · 2017-02-13 09:07:24Z

0

On page load this.state.active is set to false therefore the "Sign OUT" button is rendered, which has no onClick attribute. I think you want your code to look something like this:

{this.state.active ? 
                <Button label="Sign OUT" onClick={this.change}/> :
                <Button label="Sign in"/>}

answered Feb 13, 2017 at 9:07

Jakob Lind

1,4401 gold badge10 silver badges4 bronze badges

Collectives™ on Stack Overflow

Generic button component in reactjs

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related