[Solved] How to Filter the list and then display it

by


I was lucky to find a a solution to it.

Need to have fetch inside of seach method

https://stackblitz.com/edit/react-filter-search-demo-xu2nt6

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      users: [],
      searchTerm: ''
    };
    this.showDetails = this.showDetails.bind(this);
    this.searchTerm = this.search.bind(this);
  }

  componentWillMount() {

  }

  search(e) {

    if(e.target.value.length !== 0)
    {
      fetch(`https://jsonplaceholder.typicode.com/users`).then((res) => res.json()).then((data) => {
        this.setState({users: data})   
      })

      console.log(e.target.value)
      this.setState({searchTerm: e.target.value})
    }
    else
    {
      this.setState({users: []})
    }
  }

   showDetails(user) {
     user.show = !user.show;
     this.setState({...user});
     console.log(this.state)
    }

  render() {
    return (
      <div class="container">
      <header>
        <h1> React Filter Search Demo</h1>
      </header>
      <input class="search-box" onKeyUp={(e) => this.searchTerm(e)}   type="text"></input>
        <ul class="collapse-able">
        {this.state.users.filter(user => {
          return user.name.toLowerCase().indexOf(this.state.searchTerm) > -1;
        }).map((user) => {
          return (<li><h2>{user.name}</h2></li>);
        })}
      
        </ul>
      
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

solved How to Filter the list and then display it