Rendering Arrays in React

November 16, 2022

i am trying to render the sub array as an individual item, but it keeps rendering all the sub array items inside one list
`

 const items = [
    { id: 1, header: "Global", lst: "All Fruits" },
    {
      id: 2,
      header: "By Taste",
      lst: ["sweet", "sour", "bitter"],
    },
    {
      id: 3,
      header: "By Region",
      lst: [
        "Tropical",
        "dry",
        "Continental",
        "Temperate",
        "Polar",
      ],
    },
  ];

<ul className="dd-list">
          {items.map((item) => (
            <div key={item.id}>
              <i>{item.header}</i>

              <li className="dd-list-item">
                <button
                  type="button"
                  onClick={(e) => {
                    setSelected(item.lst);
                    setOpen(false);
                  }}
                >
                  {item.lst}
                </button>
              </li>
            </div>
          ))}
        </ul>

`
this is the result

thanks in advance

expected result

By Taste
-sweet
-sour
-bitter
By Region
-Tropical
-dry
-Continental
-Temperate
-Polar

>Solution :

You should add inner list

  <ul className="dd-list">
    {items.map((item) => (
      <li key={item.id}>
        <i>{item.header}</i>
        <ul>
          {item.lst.map((innerItem) => (
            <li className="dd-list-item">
              <button
                type="button"
                onClick={(e) => {
                  setSelected(innerItem);
                  setOpen(false);
                }}
              >
                {innerItem}
              </button>
            </li>
          ))}
        </ul>
      </li>
    ))}
  </ul>