Two React-Select dropdowns resetting each other

Question

I have two dropdown menus using React-Select:

                <Select
                    className="type-select"
                    options={type_options}
                    onChange={filterType}
                />
                <label id='filter-label'>Filter By Generation:</label>
                <Select
                    className="gen-select"
                    options={generation_options}
                    onChange={filterGen}
                />

and the options for the two of these are as follows:

    { value: 'none', label: 'None'},
    { value: 'normal', label: 'Normal' },
    { value: 'fire', label: 'Fire' },
    { value: 'water', label: 'Water' },
    { value: 'grass', label: 'Grass' },
    { value: 'electric', label: 'Electric' },
    { value: 'ice', label: 'Ice' },
    { value: 'fighting', label: 'Fighting' },
    { value: 'poison', label: 'Poison' },
    { value: 'ground', label: 'Ground' },
    { value: 'flying', label: 'Flying' },
    { value: 'psychic', label: 'Psychic' },
    { value: 'bug', label: 'Bug' },
    { value: 'rock', label: 'Rock' },
    { value: 'ghost', label: 'Ghost' },
    { value: 'dark', label: 'Dark' },
    { value: 'dragon', label: 'Dragon' },
    { value: 'steel', label: 'Steel' },
    { value: 'fairy', label: 'Fairy' },
];

const generation_options = [
    { value: 'none', label: 'None'},
    { value: 'i', label: 'I'},
    { value: 'ii', label: 'II'},
    { value: 'iii', label: 'III'},
    { value: 'iv', label: 'IV'},
    { value: 'v', label: 'V'},
    { value: 'vi', label: 'VI'},
    { value: 'vii', label: 'VII'},
    { value: 'viii', label: 'VIII'},
]

Both of these dropdowns are stored in state using React Hooks, and in the onChange methods for both, the value for the given Select is updated and the other is reset to "none". Ex: If my first select is set to "Fire" then when I change my second select to Gen IV, the first select sets back to "none". Functionally, I already have this working and am able to use the React-Selects as I want, but the issue I'm having is that when updating one select, the other select won't change to show that it's been changed. I've tried adding value={type} where type is the state the first select corresponds to, but that just causes the React-Select component to never show the selected value. Does anyone know how to get these React-Selects to operate in the way I'm describing? I can elaborate on parts of this more if more explanation is needed.

Thanks!

Edit: Here are the filterType and filterGen methods:

    function filterType(selectedOption) {
        setType(selectedOption.value)
        setGen("none")
        if(selectedOption.value === "none") {
            setPage(beginningUrl)
        } else {
            setPage(`https://pokeapi.co/api/v2/type/${selectedOption.value}`)
        }
    }

    function filterGen(selectedOption) {
        setGen(selectedOption.value)
        setType("none")
        if(selectedOption.value === "none") {
            setPage(beginningUrl)
        } else {
            setPage(`generation-${selectedOption.value}`)
        }
    }

Please add the code for how the values are stored in state, and how you change them in filterType and filterGen — Jayce444

Chowdahhh Chowdahhh · Accepted Answer · 2020-11-11T01:23:59

Figured it out. The issue was I was setting the state to just the value of the selected item, instead of the whole object (ie: {value: 'fire', label: 'Fire}. Fixed pieces of code below, with the changes in bold:

    function filterType(selectedOption) {
        **setType(selectedOption)**
        **setGen({ value: 'none', label: 'None'})**
        if(selectedOption.value === "none") {
            setPage(beginningUrl)
        } else {
            setPage(`https://pokeapi.co/api/v2/type/${selectedOption.value}`)
        }
    }

    function filterGen(selectedOption) {
        **setGen(selectedOption)**
        **setType({ value: 'none', label: 'None'})**
        if(selectedOption.value === "none") {
            setPage(beginningUrl)
        } else {
            setPage(`generation-${selectedOption.value}`)
        }
    }

            <div className="select-container">
                <label id='filter-label'>Filter By Type:</label>
                <Select
                    className="type-select"
                    options={type_options}
                    onChange={filterType}
                    **value={type}**
                />
                <label id='filter-label'>Filter By Generation:</label>
                <Select
                    className="gen-select"
                    options={generation_options}
                    onChange={filterGen}
                    **value={gen}**
                />
            </div>

Two React-Select dropdowns resetting each other

1 Answers