map-declarative.tsx

import React from 'react';

type Todo = {
  id: number;
  title: string;
  completed: boolean;
}

type Props = {
  todo: Todo;
}

const TodoItem = ({ todo }: Props) => {
  return (
    <li>{todo.title}</li>
  )
};

const TodoList = () => {
  const todos: Todo[] = [
    { id: 1, title: 'Buy nachos', completed: false },
    { id: 2, title: 'Buy avocado', completed: true },
    { id: 3, title: 'Buy ground beef', completed: false },
  ];
  
  return (
    <ul>
      {todos.map((todo) => <TodoItem key={todo.id} todo={todo} />)}
    </ul>
  )
};