如何根据下拉菜单中的选定值过滤数据并使用reactjs在输入字段中搜索查询？

Question

i want to filter data based on the search query entered in input field from the values selected in dropdown menu.

What i am trying to do? Consider the image below

From the select dropdown option user can select both messages and info or either of the options. Based on the option selected from dropdown menu and search query entered in the search input field it should filter data.

Suppose if user selected messages and entered search query "hello" it should retrieve messages containing text "hello" and similarly with info and messages option as well.

I am not sure how to do this. Could someone help me solve this?

Below is the code,

<div className='wrapper'>
    <div>
        {!state.expanded && <Svgsearch/>}
                {state.expanded && props.active && <div onClick= 
                    {this.collapse_input}><Svgsearch/></div>}
                {state.expanded &&
                    <div className="search_input">
                        <input type="text" placeholder="search query" />
                    </div>}
                <div className="search_dropdown">
                    <FieldDropdown on_dropdown_toggle= 
                        {this.handle_dropdown_toggle} />
                </div>
            </div>
        </div>);

export default class FieldDropdown extends react.component {
    render = () => {
    return (
        <Dropdown className="category_dropdown" on_dropdown_open= 
            {this.handle_dropdown_open} on_dropdown_close= 
            {this.handle_dropdown_close}>
                <div>
                    <button>{dropdown_text}</button>
                </div>

            {state.options.map((option, i) => {
                return (
                    <DropdownItem key={i} on_select= 
                        {this.handle_option_selection} value={i}>
                        <input type="checkbox" value={option.value} 
                            checked="true" readOnly />
                        <span> 
                            {option.text}</span>
                    </DropdownItem>)
            })}
        </Dropdown>);
};

Consider i have messages and info in an array of objects.

How can i write a method to filter data based on option selected from dropdown.

Thanks.

Answer 1

Html for query field

 <input
            id="searchId"
            type="text"
            value={this.state.queryValue}
            onChange={this.handleTextChange}
          />

State

 state = { data: [], filteredData:[],queryValue: '' ,value:'' };

Event Handling Method

     handleTextChange = event => {
//read the value of the textbox with event.target.value
        const filteredData = this.state.data.filter(d =>
        //  object where condition based on value(options value) & queryValue
        );
        this.setState({ queryValue: event.target.value, filteredData});
      };

and bind UI to the filteredData.