React search dynamically from an array as "LIKE" works in SQL

Question

I'm working on a dropdown and what I want is when the user type something in the input field of that drop down, the results of the dropdown should be sorted. The values of the dropdown come from an array.

For example, codeList = [N1, N2, N3, N10 ,B1, B2, B3,B10 ]

When user type just N these results should come in dropdown. N1, N2, N3, N10

When user type N1 only these results should come. N1, n10

handleChange = (event) => {
    let { filter } = this.state;
    filter = {
      ...filter,
      [event.target.id]: event.target.value,
    };
    this.setState({ filter });
    if( event.target.id === 'rtnRsnCd'){
      this.setState({ [event.target.id]: event.target.value, showAllDropDownValues: false })
      if (event.target.value) {
        this.getLovRsnCd(event.target.value);
      } else {
        this.getLovRsnCd.cancel();
      }
    }
    console.log("target type", event.target.id);
  }

getLovRsnCd = (rsnCd) => {
    const { showAllDropDownValues } = this.state;
    const { actions, userId, opcode, codeList } = this.props;
    if (showAllDropDownValues) {
      rsnCd = null;
    }
    let rsnList = [];
    const index = _.findIndex(codeList, (e)=>{
      return _.contains(e,rsnCd);
    });

<ButtonDropdown
  direction="down"
  className="manifest-detail-button-width"
  isOpen={openReasonCode}
  toggle={() =>
    this.setState(
      {
        openReasonCode: !openReasonCode,
        showAllDropDownValues: true
      },
      this.getLovRsnCd
    )
  }
>
  <DropdownToggle className="swms-po-status-button-wrapper">
    <Input
      value={rtnRsnCd || ""}
      id="rtnRsnCd"
      className="swms-manifest-invoice-rtn-input text-uppercase"
      onChange={this.handleChange}
      // onChange={(e) => this.setState({ [e.target.id]: e.target.value })}
    />

I thought of using lodash but not sure how this works.

Answer 1

Try This!

const names = ["N1", "N2", "N3", "N10", "B1", "B2", "B3", "B10"];  
const yourString = "n" 
return (
<div>
{names
  .filter((name) => name.toLowerCase().includes(yourString) ||  name.toUpperCase().includes(yourString))
  .map((filteredName) => (
    <li>{filteredName}</li>
  ))}
</div>  
);