My data doesn't render in the browser but logs fine?

[darrylmorley]

Hi,

I'm trying to use data from an API but my data does not render in the browser. This is my first foray into React so I'm not sure what I'm missing. Would somebody mind pointing out my error please?

export default function Home({ items }) {
  console.log(items) // Items listed in the console fine
  return (
    <ul>
      {items.map((item, index) => {
        <li key={index}>{item.description}</li>
      })}
    </ul>
  )
}

export async function getStaticProps() {
  // Get Data Here
  return { props: {
      items
    }}
};

---

The below also console.logs as expected.

export default function Home({items}) {
  return (
    <ul>
      {items.map((item, index) => {
        console.log(item.description);
        <li key={index}>{item.description}</li>
      })}
    </ul>
  )
}

[jamesmosier]

{items.map((item, index) => {
  console.log(item.description);
  <li key={index}>{item.description}</li>
})}

should be:

{items.map((item, index) => {
  console.log(item.description);
  return <li key={index}>{item.description}</li>
})}

alternatively you could replace the braces with parenthesis and then you could do it like this (which is an implicit return of you <li>...):

{items.map((item, index) => (
  <li key={index}>{item.description}</li>
))}

[darrylmorley]

Damn it! ;) Thanks!