Dynamically Select Options From Multiple Select Dropdown With Reactstrap In React js

Question

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?

Answer 1

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