React Multi-Step Form using Semantic UI

Question

I'm just getting a grasp of Semantic UI with React and was following this tutorial.

Although not bad the "switch case" used is throwing a warning "Expected a default case".

I'm assuming this an easier way to accomplish and eliminate the warning message?

render(){
        const {step} = this.state;
        const { firstName, lastName, email, age, city, country } = this.state;
        const values = { firstName, lastName, email, age, city, country };
        switch(step) {
        case 1:
            return <UserDetails 
                    nextStep={this.nextStep} 
                    handleChange = {this.handleChange}
                    values={values}
                    />
        case 2:
            return <PersonalDetails 
                    nextStep={this.nextStep}
                    prevStep={this.prevStep}
                    handleChange = {this.handleChange}
                    values={values}
                    />
        case 3:
            return <Confirmation 
                    nextStep={this.nextStep}
                    prevStep={this.prevStep}
                    values={values}
                    />
        case 4:
            return <Success />
        }
    }

Answer 1

Add this just as you would create a case. :

default:
            return <UserDetails 
                    nextStep={this.nextStep} 
                    handleChange = {this.handleChange}
                    values={values}
                    />

`

This is the default case, called when the value is not 1, nor 2,3 and 4.