To print values of an array in dropdown

Question

I am having an object containing arrays.

{"ItemIsExportControlled":["true","false"],"OrderShippingDestination":["domestic","foreign"],"OrderShipping":["ground","air","sea"],"ItemStockStatus":["validInStock","invalid","validOutOfStock"],"OrderDeliveryTimeframe":["oneMonth","immediate","oneWeek"],"OrderPricingScheme":["scheme2","scheme1","scheme3"]}

I wrote the following function to populate values of each array in corresponding dropdown.

    columns1.map(function(item,idx){
     if(item != "" && item != "Is negative combination" && item != "Is don't care" && item != "Requirements"){
       headerFields.push(<th className="cell" key={item} filterkey={item} style={{wordWrap:'break-word',border:"1px solid black"}} showSearch={false}>
         <select type="text" className="form-control" name="filterOptions" id="filterOptions" >
            <option key="select">All Values</option>
              {self.renderFilterOptions(item)}
          </select>{item}</th>)
      }
   });

renderFilterOptions(item) {
      let filterList = [];
      if (this.props.state.getCartesianFilter != undefined)
        Object.keys(this.props.state.getCartesianFilter).map((check,i)=> {
          if(item === check) {
              filterList.push(<option key={this.props.state.getCartesianFilter[check]} value={this.props.state.getCartesianFilter[check]}>{this.props.state.getCartesianFilter[check]}</option>)
          }
        });
      return filterList;
    }

here, this.props.state.getCartesianFilter stores the object information that i have pasted in the beginning.

The problem with my code is, it is printing the values of each array in dropdown in a single option value. I want each value to come one after the other like in a normal dropdown. Can anyone please help me to rectify the issue with my code. Thanks in advance..

Answer 1

Why so complex. You can simplify it as below.

Sandbox: https://codesandbox.io/s/react-example-jdklt

 renderFilterOptions(item) {
    const data = this.state.getCartesianFilter;
    if (data) {
      return data[item].map(d => (
        <option key={d} value={d}>
          {d}
        </option>
      ));
    }
    return null;
  }
  render() {
    return (
      <select
        type="text"
        className="form-control"
        name="filterOptions"
        id="filterOptions"
      >
        <option key="select">All Values</option>
        {this.renderFilterOptions("ItemIsExportControlled")}
      </select>
    );
  }