Using condition in Reactjs components

Question

In my study example of code every button must display different text on click depending on condition writing in parent component.

 handlerButtons=()=> {
    switch(this.props.id) {
        case "id1": this.setState({text: "Text 1"}); break;
        case "id2": this.setState({text: "Text 2"}); break;
        case "id3": this.setState({text: "Text 3"}); break;
        case "id4": this.setState({text: "Text 4"}); break;
        case "id5": this.setState({text: "Text 5"}); break;
        default: this.setState({text: "Text default"}); break;
    }
}

Why does the click on any button display only default text? What is wrong with condition?

sagi · Accepted Answer · 2018-08-30 14:20:25Z

1

You're actually missing onClick on the most import place - the button it self . You're also checking the value of this.props.id though the id isn't in your props. Do the following changes:

class MyButton extends React.Component { 
    onClickHandle = (e) => { this.props.onClick(e) }
    render() {          
        return <button id={this.props.id} className="mybutton" onClick= {this.onClickHandle}>{this.props.label}</button>;    
    }
}

Change ButtonList to this:

class ButtonsList extends React.Component { 

    render() {

        return(
        <ul>
            {buttons.map((button)=> <MyButton id={button.id} label={button.label} onClick={this.props.handlerButtons}/>)}           
        </ul>
        );  
      }
    }

And lastly, change your handler:

handlerButtons=(e)=> {
    switch(e.target.id) {
        case "id1": this.setState({text: "Text 1"}); break;
        case "id2": this.setState({text: "Text 2"}); break;
        case "id3": this.setState({text: "Text 3"}); break;
        case "id4": this.setState({text: "Text 4"}); break;
        case "id5": this.setState({text: "Text 5"}); break;
        default: this.setState({text: "Text default"}); break;
    }
}

edited Aug 30, 2018 at 14:20

answered Aug 30, 2018 at 13:42

sagi

40.6k7 gold badges66 silver badges87 bronze badges

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

4 Comments

sagi Over a year ago

@Irina I've managed to solve it, need a few changes. Update answer in a minute

sagi Over a year ago

@Irina Updated .

sagi Over a year ago

This will have to be on Sunday then .. if you want give a new link to the updated code and I’ll tell you what’s missing . Also please explain what exactly is not working .. when I tested the label has changed on each button

sagi Over a year ago

You have two typos , first -> HandleButtons should get e as input parameter, like my example above , right now you're not getting anything as parameter. Second -> in ButtonList component you're missing an s in onClick : onClick={this.props.handlerButtons} @Irina . Change this and the code will work

Mayank Shukla · Accepted Answer · 2018-08-30 13:45:56Z

1

Its because, You are passing the function to MyButton component but not using it, means there is no onClick handler attached with button element that's why.

Whatever the data/function we pass in props they will be just the entries of the object, we need to use them somewhere.

Like this:

<button
    id={this.props.id}
    className="mybutton"
    onClick={this.props.click}
>
        {this.props.label}
</button>

Suggestion: Use the same name for handler function when passing in props to avoid confusion.

Working Code.

answered Aug 30, 2018 at 13:45

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Collectives™ on Stack Overflow

Using condition in Reactjs components

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related