Estoy usando next.js y tengo una página que representa un componente.
export default function SamplePage() { return ( <> {myData.map((countries) => { if (countries.title === "USA") { { countries.states.map((state) => { if (state.name === "NY") { console.log(state.name); // NY return <NYMap />; } elseif (state.name === "CA") { console.log(state.name); // Californima return <CaliforniaMap />; } }); } } })} </> ); } pero no puedo representar <NYMap /> y <CaliforniaMap /> . myData se pasa correctamente y el uso del registro de la consola dentro de las declaraciones if funciona simplemente sin mostrar el componente.
Sin un return explícito en el map externo, lo que se devolvía implícitamente no estaba undefined y no había nada que representar.
Agregue una declaración de return al mapeo de estados:
return countries.states.map((state) => { if (state.name === "NY") { console.log(state.name); // NY return <NYMap />; } elseif (state.name === "CA") { console.log(state.name); // Californima return <CaliforniaMap />; } });