How To Do A "search Function " In React When Using Axios To Call Information From Json?

I am comparatively new to react and is practising myself with various scenarios. I am trying to call data from a json file online using 'Axios' and then use search to filter out th

Solution 1:

3 steps.

Add an text input node in your JSX and bind its onChange event to an event handler in your class and the value to the state value we will set :

<input type='text' onChange={this.searchChanged} value={this.state.search}/>

Create a handler to change your state when the onChange event is fired in your class :

searchChanged = event => {
    this.setState({ search: event.target.value })
}

And finally use filter on your array and includes to only keep the data corresponding to your filter :

{this.state.users
    .filter(user => user.name.includes(this.state.search))
    .map(user => (
        <ulkey={user.id}class="list-group card card-1"><liclass="list-group-item">{user.sender.name}</li></ul>
    )
)}