Reset other selects based upon on one select (ReactJS)

Question

The goal here is to make it to where everytime a parent select changes it's value, all children selects get their value reset to default(1st value of empty string).

import React, {Component} from 'react';

class TestingSelects extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectOneValue: "",
            selectTwoValue: "",
            selectThreeValue: "",
            selectFourValue: ""
        }
    }
    selectOneOnChangeHandler = (ev) => {
        this.setState({
                        selectOneValue: ev.target.value,
                        selectTwoValue: "",
                        selectThreeValue: "",
                        selectFourValue: ""
                    });
    }

    selectTwoOnChangeHandler = (ev) => {
        this.setState({
                        ...this.state,
                        selectTwoValue: ev.target.value,
                        selectThreeValue: "",
                        selectFourValue: ""
                    });
    }

    selectThreeOnChangeHandler = (ev) => {
        this.setState({
                        ...this.state,
                        selectThreeValue: ev.target.value,
                        selectFourValue: ""
                    });
    }

    selectFourChangeHandler = (ev) => {
        this.setState({...this.state, selectFourValue: ev.target.value});
    }

    render(){
        return (
            <div>
                <form>        
                    <div>
                        <select onChange={ev => this.selectOneOnChangeHandler(ev)}>
                            <option value="">Please Select an Option</option>
                            <option value="select1option1">select 1 option 1</option>
                            <option value="select1option2">select 1 option 2</option>
                        </select>
                    </div>
                    {
                        this.state.selectOneValue === "select1option1" && 
                            <div>
                                <select onChange={ev => this.selectTwoOnChangeHandler(ev)}>
                                    <option value="">Please Select an Option</option>
                                    <option value="select2option1">select 2 option 1</option>
                                    <option value="select2option2">select 2 option 2</option>
                                    <option value="select2option3">select 2 option 3</option>
                                    <option value="select2option4">select 2 option 4</option>
                                    <option value="select2option5">select 2 option 5</option>
                                    <option value="select2option6">select 2 option 6</option>
                                    <option value="select2option7">select 2 option 7</option>
                                </select>
                            </div>
                    }
                    {
                        (this.state.selectTwoValue === "select2option1" || 
                        this.state.selectTwoValue === "select2option2" || 
                        this.state.selectTwoValue === "select2option5" || 
                        this.state.selectTwoValue === "select2option7") && 
                            <div>
                                <select onChange={ev => this.selectThreeOnChangeHandler(ev)}>
                                    <option value="">Please Select an Option</option>
                                    <option value="select3option1">select 3 option 1</option>
                                    <option value="select3option2same">select 3 option 2</option>
                                    <option value="select3option2same">select 3 option 3</option>
                                </select>
                            </div>
                    }
                    {
                        this.state.selectThreeValue === "select3option2same" && 
                            <div>
                                <select onChange={ev => this.selectFourOnChangeHandler(ev)}>
                                    <option value="">Please Select an Option</option>
                                    <option value="allowed">Yes</option>
                                    <option value="denied">No</option>
                                </select>
                            </div>
                    }
                </form>
            </div>
        )
    }
}

export default TestingSelects;

Edit: How to reproduce issue...

• [First Select]: select 1 option 1
• [Second Select]: select 2 option 1
• [Third Select]: select 3 option 1
• [Second Select]: select 2 option 2

  Here is where the 3rd select should reset to "Please Select an Option"

Does anyone know how to do this?

Answer 1

Everything should work as long as you bind the state to the value props of each <select> element. The reason why your code doesn't work is because you are not binding the value of each select to the component's state.

For instance, this is what you should be doing:

<select onChange={ev => this.selectOneOnChangeHandler(ev)} value={this.state.selectOneValue}>