I'm new to Next.js and have problems sharing data between components. I have three components:
//index.js
function App() {
const options = []
for (let i = 1; i < 101; i++) {
options.push({
label: i,
value: i
})
}
return (
<>
<Form options={options}/>
</>
)
}
function Form({options}) {
return(
<form>
<Select options={options}/>
</form>
)
}
function Select({options}) {
options = options?.map(option => {
return <option value={option.value}>{option.label}</option>
})
return (
<select>
{...options}
<select/>
)
}
This is a simplified version of the code.
When I run this code I get this Error:
x Spread children are not supported in React.
This is because the options variable is not updated with the map function, when I run this code inside the select element of the Select component:
{console.log(options)}
I get an array of objects with objects that looks like this:
{
$$typeof: Symbol(react.element),
key: "1",
//etc....
}
When I run this console.log() inside the Form component I get the array that I created inside the index.js file.
I feel like this has something to do with the Server-Side-Rendering in NextJS.
Try, This because you are trying to do a map options data and put that into the select tag that is why select doesn't recognize your spread options data and you just need map that options data inside the select tag
function Select({options}) {
return (
<select>
{options?.map((option) => {
return <option value={option.value}> {option.label}</option>;
})}
</select>
);