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

2 Answers 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);
}