Soy nuevo en Next.js y tengo problemas para compartir datos entre componentes. Tengo tres componentes:
//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/> ) }Esta es una versión simplificada del código.
Cuando ejecuto este código me sale este Error :
x Spread children are not supported in React.
Esto se debe a que la variable de opciones no se actualiza con la función de map , cuando ejecuto este código dentro del elemento de selección del componente Select :
{console.log(options)}Obtengo una matriz de objetos con objetos que se ve así:
{ $$typeof: Symbol(react.element), key: "1", //etc.... } Cuando ejecuto este console.log() dentro del componente Form , obtengo la matriz que creé dentro del archivo index.js .
Siento que esto tiene algo que ver con Server-Side-Rendering en NextJS .
Intente, esto porque está tratando de hacer un mapa de datos de opciones y ponerlos en la etiqueta de selección, es por eso que seleccionar no reconoce sus datos de opciones de distribución y solo necesita mapear esos datos de opciones dentro de la etiqueta de selección
function Select({options}) { return ( <select> {options?.map((option) => { return <option value={option.value}> {option.label}</option>; })} </select> );