Antd Autocomplete is missing key in a list

Question

I want to use Antd Autocomplete control and search by Order ID. I want to place all orders Id into options property so user can chose an id from the dropdown but there is something that I'm doing wrong and I cannot figure it out what.

This is part of the data I'm receiving from the server:

Order:
[
  {
    "id": 15,
    "shipmentDate": "2022-04-20T16:32:09.109+00:00",
    "status": "IN_PROGRESS",
    "note1": "this order will be paid in June",
    "note2": null,
    "customerName": "Test 3",
  },
  {
    "id": 23,
    "shipmentDate": "2022-06-22T18:34:05.330+00:00",
    "status": "COMPLETED",
    "note1": "8558",
    "note2": null,
    "customerName": "Test1"
  },
  {
    "id": 26,
    "shipmentDate": "2022-07-08T18:11:18.776+00:00",
    "status": "IN_PROGRESS",
    "note1": "Truck 1",
    "note2": null,
    "customerName": "Test23"
  },
  {
    "id": 30,
    "shipmentDate": null,
    "status": "WAITING",
    "note1": null,
    "note2": null,
    "customerName": "Test4",
  },
  {
    "id": 18,
    "shipmentDate": "2022-04-29T14:55:12.049+00:00",
    "status": "WAITING",
    "note1": "note1",
    "note2": "note2",
    "customerName": "Test3",
  },
  {
    "id": 35,
    "shipmentDate": "2022-06-26T10:13:28.879+00:00",
    "status": "WAITING",
    "note1": "hghg",
    "note2": "iii",
    "customerName": "Test1",
  }
] 

js code:

class OrdersPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            options:[]
        };
        this.handleSearch = this.handleSearch.bind(this);
        this.onSelect = this.onSelect.bind(this);    
    }
   

    componentDidMount() {
        API.get(`orders`,{ headers: { Authorization: this.token}})
            .then(res => {
                if(!Object.keys(res.data).length){
                    console.log("no data found");
                    this.setState({loading: false,data:null });
                }
                else
                {
                    const orders = res.data._embedded.ordersDtoList;
                    this.setState({loading: false,data:orders });
                }
            })
            .catch(error => {
                var message=JSON.stringify(error.response.data.error_message);
                if(message.includes("The Token has expired"))
                    {
                        this.setState({errorMessage:"Your token has expired"})
                    }
                else
                {
                    this.setState({errorMessage:error,loading: false})
                }
                this.errorHappend("Failed to load data");
                console.error('There was an error!', error);
        });
    }

    onSelect = (value) => {
        console.log('onSelect', value);
    };
    
    handleSearch = (value) => {
        this.setState({
          options: !value ? [] : [
            value
          ],
        });
      }
 
    render() {
        const { data, loading,options } = this.state;

const options = data.map((item,index) => {
    return {
        key:index,options:item.id.toString()
    }
});

        return (
            <Layout>
                <Content>
                    <div style={{marginBottom:"1em"}}>
                    <AutoComplete style={{ width: 200 }}  options={options} onSelect={this.onSelect} onSearch={this.handleSearch} >
                        <Input.Search size="large" placeholder="Search order by id" enterButton />
                    </AutoComplete>
                    </div>
                </Content>
            </Layout>
        );
    }
}

export default OrdersPage;

I keep getting the error my list is missing a key even though I have set a key value in my options property but still I don't have an idea where the error could be. Any help would be very much appreciated. :)

Answer 1

Each option object should contain label, value proplerty , map u data object to id to value , label to label ,

sample [{ label:"web developer" value:22882 }]