I am using next.js and I have a page that renders a component.
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 />;
}
});
}
}
})}
</>
);
}
but I am not able to render <NYMap /> and <CaliforniaMap /> components. myData is passed correctly and using console log inside the if statements works just not displaying the component.
Without an explicit return in the outer map what was being implicitly returned was undefined and there was nothing to render.
Add a return statement to the states mapping:
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 />;
}
});