Ant Design Dynamic Data does not binds to Select

user_7974137 0
Viewed 557

I am using react for a school project. The dynamic data does not binds to Options from Ant Design, react js. The result is an empty option list. In actual the data comes from an external API. For testing purpose I assigned the data the state variable. The data comes in 2D array, so I am mapping through the data twice.

Result is:

enter image description here

import { useEffect, useState } from "react";
import { Select } from "antd";
const { Option } = Select;

const Complete = () => {
    const [list, setPersons] = useState([
        [
            {
                id: 1,
                personName: "Owan",
            },
            {
                id: 2,
                personName: "More",
            },
            {
                id: 3,
                personName: "Jaila",
            },
            {
                id: 4,
                personName: "Eerov",
            },
        ],
        [
            {
                id: 5,
                personName: "Rell",
            },
            {
                id: 6,
                personName: "Juko",
            }
        ]
    ]);


    

    useEffect(() => {
        console.log(list);
    }, []);

    return (
        <Select
            showSearch
            style={{ width: 200 }}
            placeholder="Select a person"
            optionFilterProp="children"
            
            filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
        >
            {list.map((l) => {

                l.map((person) => {
                    console.log(person);
                    <Option value={person.id}>
                        {person.personName}
                    </Option>;
                });
            })}
        </Select>
    );
};

export default Complete;
antd react-hooks reactjs
2 Answers

You just needed to update small one using ES6 feature here the script to combine 2 dimensional array to single array

{[].concat(...list).map((l) => <Option value={l.id}>{l.personName}</Option>)}

Here the full script:

import { useEffect, useState } from "react";
import { Select } from "antd";
const { Option } = Select;

const Complete = () => {
    const [list, setPersons] = useState([
        [
            {
                id: 1,
                personName: "Owan",
            },
            {
                id: 2,
                personName: "More",
            },
            {
                id: 3,
                personName: "Jaila",
            },
            {
                id: 4,
                personName: "Eerov",
            },
        ],
        [
            {
                id: 5,
                personName: "Rell",
            },
            {
                id: 6,
                personName: "Juko",
            }
        ]
    ]);


    

    useEffect(() => {
        console.log(list);
    }, []);

    return (
        <Select
            showSearch
            style={{ width: 200 }}
            placeholder="Select a person"
            optionFilterProp="children"
            
            filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
        >
            {[].concat(...list).map((l) => <Option value={l.id}>{l.personName}</Option>)}
        </Select>
    );
};

export default Complete;

visit live example demo

user_84777920

Try with the following code:

import { useEffect, useState } from "react";
import { Select } from "antd";
const { Option } = Select;

const Complete = () => {
  const [list, setPersons] = useState([
    [
      {
        id: 1,
        personName: "Owan"
      },
      {
        id: 2,
        personName: "More"
      },
      {
        id: 3,
        personName: "Jaila"
      },
      {
        id: 4,
        personName: "Eerov"
      }
    ],
    [
      {
        id: 5,
        personName: "Rell"
      },
      {
        id: 6,
        personName: "Juko"
      }
    ]
  ]);

  useEffect(() => {
    console.log(list);
  }, [list]);

  return (
    <Select
      showSearch
      style={{ width: 200 }}
      placeholder="Select a person"
      optionFilterProp="children"
      filterOption={(input, option) =>
        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
    >
      {list.map((l) => (
        <>
          {l.map((person) => (
            <Option value={person.id}>{person.personName}</Option>
          ))}
        </>
      ))}
    </Select>
  );
};

export default Complete;
user_82061780
Related