How to build a dynamic select box in react.js

Question

I have a project where the user can enter some input, it then pushes the data to a mongDB instance. I then have a search bar, where the user can pull the data down, once they click on a selected ID it then puts all of the corresponding document information into some text fields for the user to see.

My issue is with the select an item part, It works, if the user clicks the id it populates the fields. However I had them In H1 tags for testing, and it would display a single H1 for each ID.

Now I have moved it into a select field I get this appear.

I just need each ID to appear in one select box, not re render a box for every ID

here is my current code:

import React from "react";
import PropTypes from "prop-types";

import { Form, FormGroup, Input, Container, Row, Col, Label } from "reactstrap";
import "./Search.css";
import axios from "axios";
import SearchBox from "react-search-box";

class Search extends React.Component {
  static propTypes = {
    handleCustomer: PropTypes.func.isRequired
  };

  constructor(props) {
    super(props);
    this.state = {
      searchInfo: [],
      query: "",
      companyFilter: ""
    };

    this.itWorks = this.itWorks.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
  }

  search = query => {
    let filter = {};
    if (this.state.companyFilter) {
      filter = {
        customerID: {
          $regex: ".*" + this.state.companyFilter + ".*",
          $options: "i"
        }
      };
    }

    let url = "http://localhost:5000/getData?filter=" + JSON.stringify(filter);
    axios.get(url).then(res => {
      const searchInfo = (res.data || []).map(obj => ({
        customerID: obj.customerID,
        company: obj.companyName,
        sinage: obj.sinageCodes,
        curtain: obj.curtainCodes,
        method: obj.Method,
        notes: obj.Notes
      }));

      this.setState({ searchInfo });
      console.log(searchInfo);
    });
  };

  itWorks() {
    this.setState({
      companyFilter: document.getElementById("exampleSearch").value
    });
  }

  handleSearch = e => {
    if (e.key === "Enter") {
      this.search();
    }
  };

  componentDidMount() {
    this.search("");
  }
  render() {
    const { query, searchInfo } = this.state;

    return (
      <div>
        <Container>
          <FormGroup>
            <Label for="exampleSearch" />
            <Input
              type="search"
              name="search"
              id="exampleSearch"
              placeholder="Search for a CumstomerID"
              onChange={this.itWorks}
              onKeyPress={this.handleSearch}
            />
          </FormGroup>
        </Container>
        {this.state.searchInfo.map(function(searchInfo, index) {
          return (
            <FormGroup>
              <Label for="exampleSelectMulti">Select customerID</Label>
              <Input
                onChange={this.state.value}
                onClick={() => this.props.handleCustomer(searchInfo)}
                type="select"
                name="selectMulti"
                id="exampleSelectMulti"
                multiple
              >
                <option key={index}>
                  {" "}
                  {searchInfo.customerID.match(
                    new RegExp(this.state.companyFilter, "i")
                  ) || this.state.companyFilter === ""
                    ? "customerID: " + searchInfo.customerID
                    : ""}
                </option>
              </Input>
            </FormGroup>
          );
        }, this)}
      </div>
    );
  }
}

export default Search;

The Search function works fine, It is just simply a matter of getting all of the returned data from my API to display in one select box.

Thanks!

Answer 1

You may want to map over the options. Something like this.

  <FormGroup> <Label for="exampleSelectMulti">Select customerID</Label> <Input onChange={this.handleChange} type="select" name="selectMulti" id="exampleSelectMulti" value={this.state.value} multiple > {this.state.searchInfo.map(function(searchInfo, index) { <option key={index}> {" "} {searchInfo.customerID.match( new RegExp(this.state.companyFilter, "i") ) || this.state.companyFilter === "" ? "customerID: " + searchInfo.customerID : ""} </option> </Input> </FormGroup>