I have the following function:

loadTag(data, td) {
    var tag = this.state.session.tag.map((el) => 
    $.inArray( el.name, data ) ? 
    <option key={el.name} value={el.key} defaultValue>{el.name}</option> : 
    <option key={el.name} value={el.key}>{el.name}</option>);
    ReactDOM.render(
      <Input type="select" className="dropselect_tag" name="tag" multiple>
        {tag}
      </Input>,
      td);
}

I want to be able to dynamically select mulitple options within the list of options provided into my select drop down. For my select drop down i'm using reactstrap and select2 plugins and it does initialize but with nothing selected.

I have tried this also:

loadTag(data, td) {
    var tag = this.state.session.tag.map((el) => 
    <option key={el.name} value={el.key}>{el.name}</option>);
    ReactDOM.render(
      <Input type="select" className="dropselect_tag" defaultValue={data} name="tag" multiple>
        {tag}
      </Input>,
      td);
}

But it doesn't produce any result. And I am very sure that i'm sending in a array like this ["item"]. I parse my array from my db and test like so:

 data = JSON.parse(data.replace(/"/g,'"'));
 console.log(typeof data); 
 console.log(data);

Is there a way that i can pull this stuff out?

I have the following function:

loadTag(data, td) {
    var tag = this.state.session.tag.map((el) => 
    $.inArray( el.name, data ) ? 
    <option key={el.name} value={el.key} defaultValue>{el.name}</option> : 
    <option key={el.name} value={el.key}>{el.name}</option>);
    ReactDOM.render(
      <Input type="select" className="dropselect_tag" name="tag" multiple>
        {tag}
      </Input>,
      td);
}

I want to be able to dynamically select mulitple options within the list of options provided into my select drop down. For my select drop down i'm using reactstrap and select2 plugins and it does initialize but with nothing selected.

I have tried this also:

loadTag(data, td) {
    var tag = this.state.session.tag.map((el) => 
    <option key={el.name} value={el.key}>{el.name}</option>);
    ReactDOM.render(
      <Input type="select" className="dropselect_tag" defaultValue={data} name="tag" multiple>
        {tag}
      </Input>,
      td);
}

But it doesn't produce any result. And I am very sure that i'm sending in a array like this ["item"]. I parse my array from my db and test like so:

 data = JSON.parse(data.replace(/"/g,'"'));
 console.log(typeof data); 
 console.log(data);

Is there a way that i can pull this stuff out?

• javascript
• reactjs
• jquery-select2
• reactstrap

Share Improve this question Follow asked May 13, 2019 at 15:25 IkechukwuIkechukwu 1,14511 gold badge1313 silver badges3030 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

My advice is to use react-select, It is able to select mulitple elegantly. Can you give it a try?

npm install react-select

import React, { Component } from 'react'
import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

const MyComponent = () => (
  <Select options={options} />
)

react-select docs

I was able to resolve it this way:

loadTag(data, td) {
  data = JSON.parse(data.replace(/"/g,'"'));
  var tag = this.state.session.tag.map((el) => <option key={el.index} value={el.index}>{el.index}</option>);
  ReactDOM.render(
      <Input type="select" multiple={true} defaultValue={data} className="dropselect_tag" name="tag">
        {tag}
      </Input>,
      td);
}