React Rerenders Child Component After State Change

Question

I have a component in React which renders @material-ui table (accessed via React Router if it matters). Inside the table I have a react-select dropdown menu which is however rendered via separate component. Here's the code for that parent component:

return(
        <>
            <Table aria-label="customized table">
                <TableHead>
                    <TableRow>
                        <StyledTableCell align="center"><GameTypeSelector onGameTypeChange={setSelectedGameType} gameTypes={gameTypes} /></StyledTableCell>

...

Obviously the GameTypeSelector which I will get to in a second renders the dropdown and the gameTypes contains the options for it. setSelectedGameType is supposed to update a local state variable which will hold the new value every time the drop down changes:

const [selectedGameType, setSelectedGameType] = useState(null);

So the last thing is that other component itself. It is pretty much straight forward as well:

const [selected, setSelected] = useState({ value: "", label: "Please select game type" });
const [options, setOptions] = useState([]);

useEffect(() => {
    //set options here
}, [props]);

useEffect(() => {
    console.log("in use effect of gamte type selectedo");
    props.onGameTypeChange(selected.value);
}, [selected.value, props]);

return (
    <>
        <Select
            value={selected}
            onChange={selectedOption => setSelected({ value: selectedOption.value, label: selectedOption.label })}
            options={[{ value: null, label: "All" }, ...options]}
        />
    </>
);

The weirdest thing happens when I change the value from the drop down. It updates the local selected and then calls the function from the parent controller. That function on its turn updates the selectedGameType which is still fine and working as expected.

However, after that update it goes and rerenders the GameTypeSelector in the table once more and it then sets the selected value inside to the default which comes from this line useState({ value: "", label: "Please select game type" }); . After that the parent value of selectedGameType is also set to nothing.

In the browser it looks like this: I select a value from the drop down, it sets it inside of it, updates parent component (figured that much via different console logs) and then resets the GameTypeSelector component and it goes to its default value. It only rerenders that single part, the rest of the table stays the same and does not rerender and there is nothing in the code touching the selectedGameType anywhere else.

Any idea what's wrong? I guess I am missing something crucial here but I can't figure out what?

Answer 1

This is how React is supposed to work, if you set the component to a state then it will always show that state, you need to implement methods to handle the change and update the state as needed. See this link