React Dropdown mapped with empty values

Question

I manage to .map a Dropdown but only one value is displayed and that is empty:

Dropdown code:

const DropdownCategories = () => {
            const [dropdownParam1, setDropdownParam1] = useState([]);

            useEffect(() => {
                API('search', {
                    'car_stats': true,
                }).then((response) =>
                    setDropdownParam1([response.data.body.categoryEventCount])
                )
            }, [])

            function DropdownComponent() {
                console.log(dropdownParam1) //returns correctly
                return (
                    <Dropdown
                        isOpen={dropdownOpen}
                        toggle={() => setDropdownOpen(!dropdownOpen)}
                    >
                        <DropdownToggle className="btn_white_dark_border dropdown_border" button caret>
                            <span>"Categories"</span>
                        </DropdownToggle>
                        <DropdownMenu>
                            {[dropdownParam1].map((v, i) => (
                                <DropdownItem
                                    key={i}
                                    value={v.Name}
                                >
                                </DropdownItem>
                            ))}
                        </DropdownMenu>
                    </Dropdown>
                );
            }
            const Content = () => {
                if (dropdownParam1) {
                    return <DropdownComponent />
                }
                return <div className="loader">
                    <Spinner
                    >
                    </Spinner>
                </div>
            }

            return (
                <Content />
            );
        }

console.log(dropdownParam1):

Array [ {…} ]
​
0: Object { 0: {…}, 1: {…}, 2: {…}, … }
​​
0: Object { CarCount: 2, Name: null }
​​
1: Object { CarCount: 31, Name: "Category 1" }
​​
2: Object { CarCount: 39, Name: "Category 2" }
​​
3: Object { CarCount: 6, Name: "Category 3" }

length: 1

I was thinking could it be because Object 0: Name is 'null' but this probably isn't the issue, perhaps incorrect use of []? Kind thanks.

Answer 1

dropdownParam1 is an array with one element that has an object and you want to map the values of that object so you can use:

Object.values(dropdownParam1[0]).map((v, i) => ...)