I need help figuring out how to iterate through the array of objects in my React code. Currently, I am using getStaticProps() to fetch data from a mock API server online.
My project is built with nextjs. How can I achieve this using loops like for or while?
import Head from 'next/head'
export async function getStaticProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/todos')
const data = await res.json()
return {
props: { todos: data }
}
}
// The getStaticProps function runs before the component is rendered, fetching and providing data for the component to render.
const Todos = ({ todos }) => {
return (
<>
<Head>
<title>To Do List</title>
</Head>
<div>
<h1>To Do List</h1>
{todos.map(todoList => (
<div key={todoList.id}>
<a><h3>
{ todoList.title }
</h3></a>
</div>
))}
</div>
</>
);
}
export default Todos;