React props not passing dropdown values into parent component - react-hooks

Question

I've got a NextJS 13 application which is using the Tailwind CSS framework to style the UI. The app is using the Boardgame Atlas API to fetch a board game for the user based on a few dropdown list items (category, player count, and spend).
The Home component is the main component of the app and is responsible for fetching the board game from the API and rendering the UI. It uses three other components, CategoriesSelect, PlayerCount, and SpendSelect to render the dropdown lists.
The CategoriesSelect component fetches the available categories from the API and renders a dropdown list to allow the user to select the category. The PlayerCount component renders a dropdown list to allow the user to select the minimum number of players needed for the game. The SpendSelect component renders a dropdown list to allow the user to select their budget.
Once the user selects the values from the dropdown lists, the fetchOutput function is called on the click of the "Find my game" button. This function makes a GET request to the API using the selected values, and the API returns the matching games. If there are any games found, the first game in the array is logged to the console, otherwise an error message is logged.
The code can be found on GitHub here, and a live version is available on Vercel here. I've also pasted the code below for convenience:
page.js (HOME)
"use client"
import { useState, useEffect } from 'react';
import CategoriesSelect from "#/components/CategoriesSelect";
import PlayerCount from "#/components/PlayerCount";
import SpendSelect from "#/components/SpendSelect";
import axios from 'axios';
export default function Home() {
const[formData, setFormData] = useState({
category: "",
playerCount: 1,
spend: 25,
})
const fetchOutput = async () => {
console.log(formData)
try {
const { data } = await axios.get(
`https://api.boardgameatlas.com/api/search?categories=${formData.category}&min_players=${formData.playerCount}&lt_price=${formData.spend}&client_id=EsdgqvppMg`
);
if (data.games && data.games.length > 0) {
console.log(data.games[0]);
} else {
console.error('No games found');
}
} catch (error) {
console.error(error);
}
};
// useEffect(() => {
// console.log(formData)
// }, [formData])
return (
<main >
<div className="text-center mt-24 mb-16 text-4xl font-mono">looking for your next boardgame?</div>
<div className="text-center font-mono px-10 mb-4">
<span>I want to play a(n) </span>
<CategoriesSelect
formData={formData.category}
setFormData={setFormData} />
<span> game with at least </span>
<PlayerCount
formData={formData.playerCount}
setFormData={setFormData}
/>
<span> other player(s). My budget is up to: </span>
<SpendSelect
formData={formData.spend}
setFormData={setFormData}
/>
<span> USD</span>
</div>
<div className="flex">
<button type="button"
onClick={fetchOutput}
className="mx-auto px-6 py-2.5 bg-blue-600 text-white font-medium leading-tight rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out text-xl">🎲 Find my game 🎰</button>
</div>
</main>
)
}
CategoriesSelect.jsx
import { useState, useEffect } from 'react';
import axios from 'axios';
const CategoriesSelect = ({formData, setFormData}) => {
const [categories, setCategories] = useState([]);
useEffect(() => {
const fetchData = async () => {
const result = await axios(
'https://api.boardgameatlas.com/api/game/categories?client_id=EsdgqvppMg'
);
setCategories(result.data.categories);
};
fetchData();
}, []);
return (
<div className='inline mb-3 xl:w-96'>
<select className='form-select appearance-none
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding bg-no-repeat
border border-solid border-gray-300
rounded
transition
text-center
ease-in-out
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" aria-label="Default select example'
value={formData}
onChange={e => setFormData({...formData, category: e.target.value})}
>
{categories.map(category => (
<option key={category.id} value={category.id}>
{category.name}
</option>
))}
</select>
</div>
);
};
export default CategoriesSelect;
PlayerCount.jsx
"use client"
export default function PlayerCount({formData, setFormData}) {
const options = [1, 2, 3, 4, 5, 6, 7].map(number => (
<option key={number} value={number}>
{number}
</option>
));
return (
<div className='inline mb-3 xl:w-96'>
<select
value={formData}
onChange={e => setFormData({...formData, playerCount: e.target.value})}
className='form-select appearance-none
px-7
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding bg-no-repeat
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none'
aria-label='Default select example'
>
{options}
</select>
</div> )
}
SpendSelect.jsx
"use client"
export default function SpendSelect({formData, setFormData}) {
const options = [10, 25, 50, 75, 100, 200, 300 ].map(number => (
<option key={number} value={number}>
{number}
</option>
));
return (
<div className='inline mb-3 xl:w-96'>
<select
value={formData}
onChange={e => setFormData({...formData, spend: e.target.value})}
className='form-select appearance-none
px-7
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding bg-no-repeat
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none'
aria-label='Default select example'
>
{options}
</select>
</div> )
}
My challenge:
I'm having trouble updating my formData's state in my Home component from child components. The data.games.length is returning 0 even after updating the props passed from the child components. Can anyone help me with the proper way to update the formData state from its child components?

Answer 1

Fixed! Answer:
before:
onChange={e => setFormData({...formData, playerCount: e.target.value})}
after:
onChange={e => setFormData(prevFormData => ({...prevFormData, playerCount: e.target.value}))}
That should be applied to all components using onChange. It seems that I was spreading a prop instead of an object array.