Adding React-Select Dropdown Component on Button Click

Question

I am trying to add a component on click of a button. I am using react-select dropdown package. I tried with concat but it gives an error and does not adds in the DOM. Here is my jsx file

const LanguageSelect = (props) => {
    const {options, name, isLanguage} = props;
    const [language, setLanguage] = useState([{ value: '', label: '' }]);
 // Input Change 
    const handleSelectDropdownChange = (selected, index) => {
        const {value, label} = selected;
        const list = [...inputList];
        list[value, label] = language;
        setLanguage(list);
        console.log(list);
    }

    // handle to add language dropdown
    const handleAddClick = () => {
        setInputList([...inputList, {value: "", label: ""}]);
        <LanguageSelect options={options} placeholder={placeholder} name={name} isLanguageBlock={isLanguageBlock} title={title} />
    }
return (
<div className="form-group">
            <label htmlFor={name} className="control-label">{title}</label>
                <div className="form-input-container">
                    <Select 
                        className="profile-module-select-container"
                        classNamePrefix="profile-module-select"
                        options={options}
                        onChange={selected => {
                            setDropdown({
                                optionSelect: selected.value
                            });
                            handleSelectDropdownChange(selected, i);
                        }}
                    />{isLanguage && (<div className="add-language-selection">
                    <a className="addLanguage" id="addLanguage" role="link" onClick={handleAddClick} tabIndex={0}>+Add Language</a> 
                    </div>)}
                </div>
            </div>
    )
}

No framework, all css written in scss. naming convention i am using like bootstraps — tkamath99
– tkamath99, Commented Dec 10, 2020 at 9:16

Sinan Yaman · Accepted Answer · 2020-12-10 09:07:27Z

1

If you want to add a new component based on a click, you can render the component within a list loop, such as:

languageList.map((item, index) => return (
<LanguageSelect key={index} name={item.name} otherFields={item.otherFields} /> 
))

And your handleAddClick function can add a new elemnt to the languageList such as:

setLanguageList([...languageList, {name: '', otherFields:''}])

answered Dec 10, 2020 at 9:07

Sinan Yaman

5,9562 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

tkamath99 Over a year ago

There is no error, But dropdown is not getting added in the DOM.

tkamath99 Over a year ago

I am using the same datasource which i am passing to render the original dropdown here.

Sinan Yaman Over a year ago

you should include the .map function inside the return statement just after the AddLanguage <a tag. This approach is what I am using for all my components and haven't got the issue. So idk what is going wrong in this case :/

tkamath99 Over a year ago

Thank you! I was not doing it the proper way, But this approach helped. Marking it as correct answer.

Sinan Yaman Over a year ago

Glad you figured it out, happy coding

Collectives™ on Stack Overflow

Adding React-Select Dropdown Component on Button Click

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related