Как зациклить массив и вывести значения внутри массива объектов как «значение» и «метка»?

Question

У меня есть следующие данные в виде массива объектов в отдельном файле

export const usersRowData = [
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "value": "Leanne Graham",
    "label": "Leanne Graham"
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    }
  }
]

внутри моего компонента реагирования. У меня есть эти фильтры данных для выпадающего меню, жестко закодированные как значение и метка:

const filters = [
  {
    label: "name",
    options: [
      { value: "Dietrich", label: "Dietrich" },
      { value: "Patricia", label: "Patricia" }
    ]
  },
  {
    label: "username",
    options: [
      { value: "Kamren", label: "Kamren" },
      { value: "Bret", label: "Bret" }
    ]
  },
  {
    label: "email",
    options: [{ value: "Sincere@april.biz", label: "Sincere@april.biz" }]
  }
];

Как я могу зациклить вывод массива каждого имени в качестве значения и метки внутри моего реагирующего компонента, чтобы я мог отобразить их в списке.

Answer 1

Вы говорите, отображая как вариант и значение?

const filters = [
  {
    label: "name",
    options: [
      { value: "Dietrich", label: "Dietrich" },
      { value: "Patricia", label: "Patricia" }
    ]
  },
  {
    label: "username",
    options: [
      { value: "Kamren", label: "Kamren" },
      { value: "Bret", label: "Bret" }
    ]
  },
  {
    label: "email",
    options: [{ value: "Sincere@april.biz", label: "Sincere@april.biz" }]
  }
];

function App() {
  return (
    <section>
    {filters.map(data => {
      const label = <label> {data.label} </label>
      return (
        <section>
            {label}
          <select>
            {data.options.map(option => {
              return(
                <option value={option.value}> {option.value} </option>
              )
            })}
          </select>
        </section>
      )
    })}
    </section>
  )
}

Answer 2

Импортируйте их из другого файла:

import { usersRowData as filters } from "./otherFile";