Why is this React Switch Case not working?

Question

First of all, I'm sorry for such a basic question, but I just started learning React from its official documentation.

Initial state of my app I want to update the state of the topicTitle, topicContent and level when I click on the button 'Continue'. It should do so by calling the function NextTopic and incrementing let level in it. Then setting this.state.level to the value of the incremented variable level. After that the switch case should check the value of this.state.level and if it equals 1, update the state of topicName and topicContent. This is what my actually happens when my code runs

import React, { Component } from 'react';

export default class Sidebar extends Component {
    //default states
    constructor() {
        super();
        this.state = {
            level: 0,
            topicTitle: 'Topic Name',
            topicContent: 'Content!!'
        }
    }

    render() {
        const NextTopic = (e) => {
            //increment level
            let level;
            level++;
            //set state of level to incremented let level
            this.setState({level: level});
            
            //check level of state and update topic name- and content state    
            switch(this.state.level) {
                case 1: 
                    return this.setState({topicTitle: 'new Topic Name', topicContent: 'new    Content!!'});
            }       
        }
        
        //Sidebar Component
        return (
            <div>
                <h1>{this.state.topicTitle}</h1>
                <p>{this.state.topicContent}</p>
                <h2>Level: {this.state.level}</h2>
                <button id='next' onClick={NextTopic}>Continue</button>
            </div>
        )
    }
};

you are missing `level = this.state.level` just before `level++;` — Joel Harkes, May 02 '18 at 12:29

score 1 · Answer 1 · answered May 02 '18 at 12:26

1

setState does not necessarily change the level property in your state by the time your switch-case is executed. React batches various setState calls and then calls it once per approximately 16.67ms. You can do two things -

Use the level variable you created inside the NextTopic method (also, how are you incrementing an undefined variable?

let level = this.state.level level++ this.setState({level: level})

switch(level){ case 1: // your code }
Wrap the switch-case inside a callback function to setState, which is called once the state is actually changed by react -

let level = this.state.level level++ this.setState({level}, () => { switch(this.state.level) { case 1: // your code })

answered May 02 '18 at 12:26

Mukesh Soni

6,646
3
30
37

additionaly you can read [this](https://stackoverflow.com/questions/48563650/does-react-keep-the-order-for-state-updates/48610973#48610973) for further understanding of when setState happens – kugtas May 02 '18 at 12:33
Well, as you said in point 1, I haven't even defined that variable and that was my error. Thanks for clearing it up! – Virtue May 02 '18 at 12:38
@kugtas Thanks, I'll check it out =] – Virtue May 02 '18 at 12:39

score 1 · Accepted Answer · edited May 02 '18 at 14:22

1

You haven't set level to 0 in NextTopic. You can increment level by 1 directly in setState:

this.setState((prevState, props) => ({
  level: prevState.level + 1
}));

edited May 02 '18 at 14:22

Wiktor Czajkowski

1,623
1
14
20

answered May 02 '18 at 12:26

swapnil2993

1,384
11
15

Why is this React Switch Case not working?

2 Answers2