Search filter in React?

Question

I have been trying a lot of different solutions but none has worked so far. I want to filter the data I get from an API in an input field. I have put the data in a list I call peopleList and that's the list I want to filter.

Here is the data from the Api: https://gyazo.com/5925e386728519d28046518c583facde

and Code:

import React from 'react'
import axios from 'axios'

class List extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      peopleList: [], // here the empty list
      search: '',
    }
  }

  componentDidMount() {
    this.peopleListFromApi()
  }

  peopleListFromApi() {
    const baseUrl = 'https://swapi.dev/api/'

    axios.get(baseUrl + 'people').then((response) => {
      let peopleList = response.data.results.map((person, i) => {
        return (
          <main key={i}>
            <ul key={i}>
              {
                <li key={i}>
                  {'(' +
                    person.gender +
                    ') ' +
                    person.name +
                    ' is ' +
                    person.height +
                    ' cm tall, got ' +
                    person.eye_color +
                    ' eyes and is born ' +
                    person.birth_year}
                </li>
              }
            </ul>
          </main>
        )
      })
      this.setState({ peopleList: peopleList }) // here i update it with the data from api
    })
  }

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

  render() {
    return (
      <main>
        <ul>
          {this.state.peopleList} {/* write it out on screen */}
        </ul>
        <input
          className="search"
          placeholder="Search the universe..."
          type="text"
          value={this.state.search}
          onChange={this.onchange}
        ></input>
      </main>
    )
  }
}

export default List

Answer 1

Step 1: Store json data in state as it was received in API response:

peopleListFromApi = () => {
  const baseUrl = 'https://swapi.dev/api/'
  axios.get(baseUrl + 'people').then((response) => {
    const peopleList = response.data.results || []
    this.setState({ peopleList: peopleList })
  })
}

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

filterFunction = (people) => {
  return people.name.toUpperCase().indexOf(this.state.search.toUpperCase()) > -1
}

Step 2: Filter and show it in the UI:

render() {
  return (
    <main>
      <ul>
        {this.state.peopleList.filter(this.filterFunction).map((filtered, i) => (
          <li key={i}>
            {/* You can use: key={filtered.id} if it exists */}
            {'(' +
              filtered.gender +
              ') ' +
              filtered.name +
              ' is ' +
              filtered.height +
              ' cm tall, got ' +
              filtered.eye_color +
              ' eyes and is born ' +
              filtered.birth_year}
          </li>
        ))}
      </ul>
      <input
        className="search"
        placeholder="Search the universe..."
        type="text"
        value={this.state.search}
        onChange={this.onchange}
      ></input>
    </main>
  )
}

Answer 2

let users = [
  {
    name: 'riyas',
    age: 31
  },
  {
    name: 'testuser',
    age: 22
  },
 {
    name: 'testuser123',
    age: 22
  }
];

class Test extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            users: users,
            result: users,
        };

        this.filterList = this.filterList.bind(this);

    }

    componentWillReceiveProps(nextProps) {

        this.setState({
            users: nextProps.users,            
        });

    }

    filterList(event) {
        let value = event.target.value;
        let users = this.state.users, result=[];
        result = users.filter((user)=>{
            return user.name.toLowerCase().search(value) != -1;
        });
        this.setState({result});
    }

  render(){

    const userList = this.state.result.map((user) => {
      return <li>{user.name} {user.age}</li>;
    });

    return(<div>
      <input type="text" placeholder="Search" onChange={this.filterList}/>
      <ul>
        {userList}
      </ul>
      </div>
    );

  }
}

ReactDOM.render(<Test/>, document.getElementById('app'))

This is an example for filtering the data using a text box

Answer 3

Here is the code snippet, that you can use to filter data :

  const filterNames = ({ name }) => {
    return name.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
  };

  return (
    <div className="App">
      <h2>Search</h2>
      <SearchBar onSearch={setSearchValue} value={searchValue} />
      <ul>
        {users.filter(filterNames).map((user) => {
          return <li key={user.id}>
            {user.name}
          </li>
        })}
      </ul>
    </div>
  );

WORKING DEMO