score:1

Accepted answer

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>
  )
}

score:1

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

score:4

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


Related Query

More Query from same tag