Next.js dynamically loaded component not displaying passed data

Question

I have a server where I'm attempting to load the footer of the page as a component, but that footer needs data that is grabbed by each individual page through getStaticProps. When I pass the data to the dynamically loaded footer, the data can be seen when I console.log, but the elements from a .map of the data are never created.

Home:

import { getCities } from '../lib/cities';
import dynamic from 'next/dynamic'

const DynamicFooter = dynamic(() => import('../components/footer'))

export default function Home({ allCities }) {
    return (
        <div className="container">

            <DynamicFooter {...allCities} />
        </div>
    )
}

export async function getStaticProps() {
    const allCities = getCities()
    return {
        props: {
            allCities
        }
    }
}

Footer:

export default function Footer(data) {
    return (
        <div>
            <div>SOME TEXT</div>
            {
                data.cities.map((city) => {
                    console.log(city);
                    <div key={city.url}>
                        {city.name}
                    </div>
                })
            }
        </div>
    )
}

The console.log will display each city that is being loaded and I can see the SOME TEXT div, but each div containing the city.name is never added to the page.

hurricane hurricane · Accepted Answer · 2020-06-17T22:12:37

You don't render the map in your component.

You can use shorthand returns or normal returns.

data.cities.map((city) => {
  return (
    <div key={city.url}>
      {city.name}
    </div>
  )
})

or

data.cities.map((city) => (
  <div key={city.url}>
    {city.name}
  </div>
))

Next.js dynamically loaded component not displaying passed data

1 Answers