How to render nested array elements in React?

To render nested array elements in React, we can use the JavaScript array map method.

For instance, we write

list.map((item, index) => {
  return (
    <div key={index}>
      <ul>{item.value}</ul>
      {item.list.map((subitem, i) => {
        return (
          <ul>
            <li>{subitem.value}</li>
          </ul>
        );
      })}
    </div>
  );
});

to call map on list and item.list to render the values in them.

We call map with a function to render the elements we want in list and item.list.