CODEWITHSUNDEEP
antdreact-typescript
curiousguy
curiousguy

Reputation: 3262

ANTD React Select Option Property 'value' is missing

I am relatively new in react. I was exploring ANTD react UI and wanted to implement dropdown select with filter option.I found below sample code snippet in ANTD official site .

import { Select } from 'antd';

const { Option } = Select;

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

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

ReactDOM.render(
  <Select mode="tags" style={{ width: '100%' }} onChange={handleChange} tokenSeparators={[',']}>
    {children}
  </Select>,
  mountNode,
);

But when i tried the same I was getting error, looks like some issue with ANTD component itself .

Property 'value' is missing in type '{ children: string; key: string; }' but required in type 'OptionProps'.ts(2741)
index.d.ts(9, 5): 'value' is declared here.

Upvotes: 2

Views: 1957

Answers (1)

JayCodist
JayCodist

Reputation: 2554

Each antd Option component requires a unique value prop. Change your for loop to:

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(
    <Option value={i.toString(36) + i} key={i.toString(36) + i}>
      {i.toString(36) + i}
    </Option>);
}

Upvotes: 1

Related Questions