How to reset value of select box to default in react - reactjs

Question

I have the following code https://codesandbox.io/s/async-http-u9zsg
What I am trying to achieve is to reset the value of the second select box every time I switch movies.
I tried a bunch of different things without any luck. I'm not asking to write me the code, I just want a push in the right direction am I missing something, is my approach completely wrong?
thanks in advance
The code :
import React, { useState, useEffect } from "react";
import fetch from "node-fetch";
const query = `{
allFilms{
films{
title
characterConnection{
characters{
name
species{
name
}
homeworld{
name
}
}
}
}
}
}`;
function App() {
const [state, setState] = useState({
loading: true,
appliedFilters: {},
species: []
});
useEffect(() => {
const fetchMovieData = () => {
const options = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ query })
};
return fetch(
"https://swapi-graphql.netlify.com/.netlify/functions/index",
options
)
.then(res => res.json())
.then(res =>
setState({ ...state, data: res.data.allFilms.films, loading: false })
);
};
fetchMovieData();
}, []);
if (state.loading) {
return <div>Loading...</div>;
}
/*work from here */
const getSpeciesOptions = () => {
if (state.appliedFilters.movie === undefined) {
return <option>Select a movie first</option>;
}
const currentMovie = state.data.filter(
movie => movie.title === state.appliedFilters.movie
);
const characters = currentMovie[0].characterConnection.characters;
const speciesList = characters.map(char =>
char.species === null ? "unknown" : char.species.name
);
return [...new Set(speciesList)].map(specie => <option>{specie}</option>);
};
const handleFilterChange = e => {
setState({
...state,
appliedFilters: {
...state.appliedFilters,
[e.target.name]: e.target.value
}
});
};
console.log(state);
const removeFilters = () => setState({ ...state, appliedFilters: {} });
const movieOptions = () =>
state.data.map(movie => <option>{movie.title}</option>);
return (
<div className="App">
<form>
<select
name="movie"
onChange={e =>
e.target.value !== "default"
? handleFilterChange(e)
: removeFilters()
}
>
<option value="default">Please select movie</option>
{movieOptions()};
</select>
<select name="species">
<option value="default">Please select a species</option>
{getSpeciesOptions()}
</select>
</form>
</div>
);
}
export default App;

Answer 1

A better approach is to fully control the value of the second select as well. So we add the value of it to the state as well:
const [state, setState] = useState({
loading: true,
appliedFilters: {},
species: [],
selected: "default"
});
Update the second control to read the value from state and also manipulate the state on change:
<select
value={state.selected}
name="species"
onChange={e => {
setState({ ...state, selected: e.target.value });
}}
>
<option value="default">Please select a species</option>
{getSpeciesOptions()}
</select>
And finally also manipulate the callback of the first to also reset the value:
const handleFilterChange = e => {
setState({
...state,
appliedFilters: {
...state.appliedFilters,
[e.target.name]: e.target.value,
},
selected: "default"
});
};
https://codesandbox.io/s/hardcore-nash-vtyx7 working example

Answer 2

All you need to do is to create a ref for the second select control.
let ref = React.createRef();
...
<select ref={ref}name="species">
<option value="default">Please select a species</option>
{getSpeciesOptions()}
</select>
</form>
Then in the callback of the first select do this:
const handleFilterChange = e => {
setState(...);
ref.current.value = 'default';
};
With the ref to the elememt you can now manipulate the value.

Answer 3

Actually, you know ReactJS exactly, but your approach causes you are complicated now. For such cases just keep the state of second select and after changing the first select reset the second one.
<select name="species" onChange={handleSpeciesChanges}>
I mean to write a state handler for the second select and then in the state handler of first one just reset the second.