List.js

import React from "react";
import Checkbox from "./Checkbox";
import { status } from "./constants";

export default function List(props) {
  const { items } = props;

  return (
    <ul>
      {items.map((item) => {
        let childList = null;
        if (Array.isArray(item.items)) {
          childList = <List items={item.items} />;
        }
        return (
          <li key={item.id}>
            <Checkbox
              id={item.id}
              name={item.name}
              checked={item.status === status.checked}
              indeterminate={item.status === status.indeterminate}
            />
            <label htmlFor={item.name}>{item.name}</label>
            {childList}
          </li>
        );
      })}
    </ul>
  );
}