/* 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
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>
);
};
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")
);