React Select: Options not show up at first click

Question

I created a child component by react-select, but options don't show up in first click on selector. For the second time each section is clicked, the options are displayed. I tried to use the AsyncSelect but again it did not work. The Data is read from Local Storage, but I don't think there is a problem with this.

Sandbox: https://codesandbox.io/s/strange-field-4elv3?file=/src/App.js

My data from local storage:

const feauters = [
    {
        "id": 5,
        "title": "Type",
        "options": [
            {
                "id": 231040,
                "name": "cloth",
                "property": 5
            },
            {
                "id": 230081,
                "name": "Synthetic materials",
                "property": 5
            }
        ]
    },
    {
        "id": 646,
        "title": "Shoe soles",
        "options": [
            {
                "id": 231063,
                "name": "Abrasion resistant",
                "property": 646
            },
            {
                "id": 231064,
                "name": "Reduce the pressure",
                "property": 646
            }
        ]
    },
]

Parent Component:

<MultiSelect features={features} />

My Component:

import React, {useEffect, useState} from 'react';
import {Form} from 'react-bootstrap';
import Select from 'react-select';

const MultiSelect = ({features}) => {

    // Declare States
    const [selectors, setSelectors] = useState([]);

    // Handle Features
    useEffect(() => {
        const initialSelectors = features.map((item, index, array) => {
            const options = item.options.map((subItem) => {
                return {
                    value: `${subItem.property}-${subItem.id}`,
                    label: subItem.name,
                };
            });

            return (
                <React.Fragment key={`product-multiselect-${index}-${item.id}`}>
                    <Form.Label htmlFor={`product-multiselect-${index}-${item.id}`}>{item.title}</Form.Label>
                    <Select
                        id={`product-multiselect-${index}-${item.id}`}
                        className="mb-2"
                        classNamePrefix="select"
                        defaultInputValue="Select..."
                        placeholder="Select..."
                        noOptionsMessage={() => 'Not Found.'}
                        isMulti
                        isClearable
                        isRtl
                        isSearchable
                        name={item.title}
                        onChange={handleChangeInput}
                        options={options}
                    />
                </React.Fragment>
            );
        });
        setSelectors(initialSelectors);
    }, [features]);

    // Handle Change Input
    const handleChangeInput = (values) => {
        console.log(values);
    };

    return selectors;
};

export default MultiSelect;

Why would you store the components in a useState, you need to only put them into the return so that the components are correctly mapped. You need to remove the defaultInputValue. Because it tries to sow the option mapped to Select..., which is not an option. That's why it does not show anything.. — Domino987, Apr 06 '21 at 14:48
@Domino987 Thanks for your help, I did not use useState at first. In the tests, the component turned out like this. — Nima Kaviyani, Apr 06 '21 at 15:06

score 1 · Accepted Answer · answered Oct 29 '21 at 16:07

1

First of all as mentioned in the comments you shouldn't store the component inside the state. Related question

Secondary, options don't show up because of defaultInputValue props. If you remove it, the component would work as intended

answered Oct 29 '21 at 16:07

Andrey

928
1
12
20

React Select: Options not show up at first click

1 Answers1