to-do.js

import React from "react";

const ToDoList = ({ items }) => {
  return (
    <div>
      <ul>
        {items.length && items.map(item => <li key={item.id}>{item.text}</li>)}
      </ul>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <h2>Today:</h2>
      <ToDoList
        items={[
          { id: 1, text: "Water the plants" },
          { id: 2, text: "Wash the car" },
          { id: 3, text: "Empty the bins" },
        ]}
      />
      <h2>Tomorrow:</h2>
      <ToDoList items={[]} />
    </div>
  );
};

export default App;