Муравей Дизайн выбрать внутри формы l oop массив?

Question

У меня есть массив свойств продукта, подобный этому

[
  {
    name: 'Color',
    options: ['Blue', 'Green', 'White'],
  },
  {
    name: 'Size',
    options: ['X', 'L', 'XL'],
  }
]

И я пытаюсь показать это в select как этот

<Form.List name="properties">
  {properties =>
    properties.map(property => {
      // options: Array(3)
      //   0: "Blue"
      //   1: "Green"
      //   2: "White"
      // _id: "5e71f09d6fa4bb28ee5a87e4"
      // name: "Color"

      return (
        <Form.Item {...property.options}>
          <Select name={property.name}>
            <Option />
          </Select>
        </Form.Item>
      );
    })
  }
</Form.List>

Но я получаю пустой Select без каких-либо значений :( Может кто-нибудь, помогите мне с этим, пожалуйста?

Answer 1

Вам необходимо сопоставить options в Select:

options.map((option) => <Select.Option key={option} value={option}>{option}</Select.Option>);

<Form.List name="properties">
  {properties.map(({ options, name, id }) => {
      // options: Array(3)
      //   0: "Blue"
      //   1: "Green"
      //   2: "White"
      // _id: "5e71f09d6fa4bb28ee5a87e4"
      // name: "Color"

      return (
        <Form.Item key={id} name={name}>
          <Select>
            {options.map((option) => (
              <Select.Option key={option} value={option}>{option}</Select.Option>
            ))}
          </Select>
        </Form.Item>
      );
    })
  }
</Form.List>

Answer 2

Вы создаете функцию с {properties => ...}, которая никогда не вызывается. Так что просто визуализируйте properties.map(...) как детей, например:

<Form.List name="properties">
  {
    properties.map(property => {
      return (
        <Form.Item {...property.options}>
          <Select name={property.name}>
            <Option />
          </Select>
        </Form.Item>
      );
    }
  }
</Form.List>