CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
ganesh kaspate
ganesh kaspate

Reputation: 2685

React search the text in an array of objects on Onchange of input

I am trying to manipulate a table data on the basis of the search in the table. So, what I have is this type of data:

this.props.datalist = {
    "content": [{
        "id": "5b7d4a566c5fd00507501051",
        "companyId": null,
        "title": "Senior/ Lead UI Developer",
        "jobDescription": null,
        "technology": "java"
    },{
        "id": "5b7d4a566c5fd005075011",
        "companyId": null,
        "title": "ead UI Developer",
        "jobDescription": null,
        "technology": "angular"
    }]
}

In this I have this data coming from my `redux state. So I show this to user in the table form by passing this as a props.

I have a search field:

<input type="text"
       id="searchJob"
       className="form-control-sm border-0 flex-grow-1"
       value={this.state.search}
       placeholder="Company Name / Technology / Job title"
       onChange={this.onInputChnage} 
/>
    <i className="fa fa-search search-job"></i>

 onInputChnage = (e) => {
    this.setState({
      search: e.target.value
    }) 
  }


<div className="col-12 pr-0 pl-0">
            <UserJobsTabel jobList={filteredList} />
          </div>
        </div>

Here , I got the filtered data in this array using filter

 [{
        "id": "5b7d4a566c5fd00507501051",
        "companyId": null,
        "title": "Senior/ Lead UI Developer",
        "jobDescription": null,
        "technology": "java"
    },{
        "id": "5b7d4a566c5fd005075011",
        "companyId": null,
        "title": "ead UI Developer",
        "jobDescription": null,
        "technology": "angular"
    }]

Now, while setting state,

I am doing like this.

this.setState({ search: data })

If I want to set the state as with key like "content": [{}] like this then How can I do this ?

Because the way I am using it is like,

{this.props.dataList && this.props.dataList.content && this.props.dataList.content.length > 0 && this.props.dataList.content.sort((a, b) => b.createdAt - a.createdAt).map((item, key) => {

What I want to do is that the table data has two keys. One is title and Technolgoy now, search happens then it should check in the object and return the matched objects and that will be displayed on table. Now if search has again nothing then it should show the default data that was present. Is there any way to do this?

Upvotes: 1

Views: 3623

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195962

The simplest way would be to create a variable in the render method containing the filtered props.datalist and use that for displaying.

something like

render(){
   const { datalist:{content} } = this.props;
   const { search } = this.state;
   const filteredList = content.filter(job=>Object.values(job).some(value=>value.includes(search)));

   return (<div>
     //whatever
     {filteredList.map(job=>....)}
   </div>)
}

You could also do the filtering in the onInputChnage and store the filtered list in the local state.

Upvotes: 1

Related Questions