0

I am using React-Select But i got error

data cannot selected multiple

View Screen captures http://ibb.co/m9TKG5p

const [languageSelect, setLanguageSelect] = useState([]);

<Select
       closeMenuOnSelect={false}
       components={animatedComponents}
       isMulti
       options={returnSkills}
       name="SkillsSelect"
       onChange={skills => setSkillsSelect(skills)}
    />

I Tryed to set same data getting from api and set in value

like -:

let skilsSelect = data.get_skills_by_user;
      let skilsSelects = [];
      if (skilsSelect) {
        for(let i = 0; i < skilsSelect.length; i++){
          skilsSelects.push(skilsSelect[i].get_skills);
        }

        setSkillsSelect(skilsSelects);
      }



<Select
   closeMenuOnSelect={false}
   components={animatedComponents}
   isMulti
   options={returnSkills}
   name="SkillsSelect"
   value={SkillsSelect}
   onChange={skills => setSkillsSelect(skills)}
/>

if anyone have any solution please guide me.

  • are your options in this structure: const options = [ { value: 'chocolate', label: 'Chocolate' }, { value: 'strawberry', label: 'Strawberry' }, { value: 'vanilla', label: 'Vanilla' } ] – Tim Gerhard Nov 8 at 10:41
0

you can try with this

import React from "react";
    import { render } from "react-dom";
    import ReactDOM from "react-dom";
    import Select from "react-select";
    import "react-select/dist/react-select.css";

    class ReactSelect extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          itemtitle: "",
          multi: true,
          multiValue: [],
          options: [
            { value: "Color", label: "Yellow" },
            { value: "Fruit", label: "Apple" },
            { value: "Tool", label: "Spanner" }
          ]
        };
      }
      onTitleChange(e, value) {
        this.setState({ [e.target.name]: e.target.value });
        this.setState({ multiValue: e.target.value });
      }
      handleOnChange(value) {
        this.setState({ multiValue: value });
      }
      render() {
        return (
          <div>
            <input
              name="itemtitle"
              type="text"
              value={this.state.itemtitle}
              placeholder="Add new..."
              onChange={this.onTitleChange.bind(this)}
            />
            <Select.Creatable
              multi
              options={this.state.options}
              onChange={this.handleOnChange.bind(this)}
              value={this.state.multiValue}
              showNewOptionAtTop={false}
            />
          </div>
        );
      }
    }

    ReactDOM.render(<ReactSelect />, document.body);
New contributor
Vyas Arpit is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • Hi @Vyas My i am passing this in my option [{"id":5,"name":"Ownership","is_active":"1","created_at":"2019-11-07 09:20:52","updated_at":"2019-11-07 09:21:12"},{"id":1,"name":"Com[{"id":5,"name":"Ownership","is_active":"1","created_at":"2019-11-07 09:20:52","updated_at":"2019-11-07 09:21:12"},{"id":1,"name":"Communication","is_active":"1","created_at":null,"updated_at":null}]munication","is_active":"1","created_at":null,"updated_at":null}] but getting same error ibb.co/m9TKG5p check – Developer Nov 8 at 11:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.