Instructions are hard to understand

It seems like I do not know how to do some of the steps.
:heavy_check_mark: ToDo should return a single outer div

const List = (props) => {
{ /* Change code below this line */ }

  const today = today.props;
  const todayTasks = today.map((task) => <p>{task.join(",")}</p>);
  const tomorrow = tomorrow.props;
  const tomorrowTasks = tomorrow.map((task) => <p>{task.join(",")}</p>);
{ /* Change code above this line */ }
};

class ToDo extends React.Component {
constructor(props) {
  super(props);
}
render() {
  return (
    <div>
      <h1>To Do Lists</h1>
      <h2>Today</h2>
      { /* Change code below this line */ }
      <List tasks={todayTasks} />
      <h2>Tomorrow</h2>
      <List tasks={tomorrowTasks} />
      { /* Change code above this line */ }
    </div>
  );
}
};
const today = ["walk two hours", "lace sandals"];
const tomorrow = ["distract from eating", "interrupt brooding with positivity", "meditate"];
  **Your browser information:**

Challenge: Pass an Array as Props

Link to the challenge:

const List = (props) => {
  { /* Change code below this line */ }
  return <p>{props.tasks.join(", ")}</p>
  { /* Change code above this line */ }
};

class ToDo extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>To Do Lists</h1>
        <h2>Today</h2>
        { /* Change code below this line */ }
        <List tasks={["one", "two", "three"]} />
        <h2>Tomorrow</h2>
        <List tasks={["one", "two", "three"]} />
        { /* Change code above this line */ }
      </div>
    );
  }
};

I chanced upon a solution. That is where I got my idea that List tasks=…
Q. Why is the array passed in with braces as a variable in declaration? {[“one”, “two”, “three”]} A. Lists defined in parent components are wrapped in braces.
I realize that I mixed which component was the parent, leading me to have to take three days to understand the challenge’s example of arrays in parent components.