to-do-solution.js

import React from "react";

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

const Apps = () => {
  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;