getServersideProps not displaying anything

Question

Hi I´m trying to fetch data and display it in a list but somehow it isn´t working. Can someone tell me whats wrong with the following function? It isn´t displaying anything or it is telling me that the data isn´t valid as child props. thanks for answers.

export async function getServerSideProps(context) {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const data = await res.json()

  return {
    props: { data }, // will be passed to the page component as props
  }
}


export default function Home({data}) {


  return (
    <div>
      <h1>Hello World</h1>
      <div>
        {
          data.forEach(item => {
            return <li>{item.title}</li>
          })
        }
      </div>
    </div>
  )
}

Answer 1

return (
  <div>
    <h1>Hello World</h1>
    <ul>{data.map(item => (<li key={item.title}>{item.title}</li>)}</ul>
  </div>
)

key should be some unique value (see React docs).