ant d select from array, react, js-CodePudding

/* eslint-disable import/named */
/* eslint-disable no-unused-vars */
import React from "react";
import { withRouter} from "react-router-dom";
import PropTypes from "prop-types";
import {  Select } from "antd";

const { Option } = Select;

const selectProps = {
  mode: "multiple",
  maxTagCount: "responsive",
  showSearch: true,
  showArrow: true,
  dropdownStyle: { zIndex: 2000 },
  filterOption: (input = "", option = "") =>
    option?.children?.toLowerCase()?.indexOf(input?.toLowerCase()) >= 0
};

const SelectD = ({}) => {


  const List = ["one","two","three"]

  return (
    <div>
      <>
        <Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
          <Col span={16}>
          
                  <Form.Item label="List" name="List" fieldKey="List">
                    <Select {...selectProps}>{List}</Select>
                  </Form.Item>
        
          </Col>
        </Row>
        <Divider />

        <Row >
  
          <Button className="next" htmlType="submit">
            Confirm
          </Button>
        </Row>
      </>
    </div>
  );
};

so I have an array List=["one", "two", "three"] These vals i need to send in the select dropdown form ant design https://codesandbox.io/s/z8nf4?file=/index.js similar to this code but instead i need to send an array like this

CodePudding user response：

This is working code from your sandbox:

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select } from "antd";

const { Option } = Select;

const children = [];
const Lists = ["one", "two", "three"];
Lists.map((item, index) => {
  children.push(<Option key={index}>{item}</Option>);
});

function handleChange(value) {
  console.log(`selected ${value}`);
}

ReactDOM.render(
  <>
    <Select
      mode="multiple"
      allowClear
      style={{ width: "100%" }}
      placeholder="Please select"
      defaultValue={[]}
      onChange={handleChange}
    >
      {children}
    </Select>
  </>,
  document.getElementById("container")
);

CodePudding user response：

Simply reproduce the code you saw in the sandbox you linked:

// ....
// ....
const SelectD = ({}) => {


  const List = ["one","two","three"]

  return (
    <div>
      <>
        <Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
          <Col span={16}>
          
                  <Form.Item label="List" name="List" fieldKey="List">
                    <Select {...selectProps}>{List.map(item => (<Option key={item}>item</Option>)}</Select>
                  </Form.Item>
        
          </Col>
        </Row>
        <Divider />

        <Row >
  
          <Button className="next" htmlType="submit">
            Confirm
          </Button>
        </Row>
      </>
    </div>
  );
};