How to output requested data from JSON (Reactjs api call)?

Question

JavaScript

Good day.
Started learning API call on ReactJs.
I output data from JSON without any problems, but now I want to output data on request that is entered into Input.
And I do not quite understand how this can be implemented in Reactjs.
Here is the code:

сlass SearchHub extends Component{

    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            items: []
          };
        }
    

    componentWillMount(){
        fetch(`http://localhost:8080/api/users/`)
        .then((response) => response.json())
        .then(
            (result) => {
              this.setState({
                isLoaded: true,
                items: result.items
              });
            },
            (error) => {
              this.setState({
                isLoaded: true,
                error
              });
            }
          )
        .catch(error => console.log('parsing failed', error))
    }

    handleSumbit(e){
        e.preventDefault();
        this.componentDidMount(this.refs.name.value);
    }

 

    render(){
        const { error, isLoaded, items } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
      <div>
        <div className="searchlanding">
            <div className="input-button-form">
            <Input 
                leftIcon={<Icon name="search" />} 
                width="1000px" 
                placeholder="Введите Фамилию и Имя"
                /> {' '}
                <Button use="primary">Найти</Button>
            </div>
        </div>
        <div className="table-result">
          <ul>
            {items.map(item => (
              <li key={item.name}>
                  {item.rating.totalLove}
                  <img src={item.avatarUri} alt="Фото" className="round-photo"/>
                  {item.name} 
              </li>
            ))}
          </ul>
        </div>
    </div>
        );
    }
  }
}

export default SearchHub;

At the moment, when the page is loaded, it displays all the data that is available in JSON.
In JSON, the search is only for the first and last names that are in "name".
Please tell me how this can be done?
I will be glad to see examples on codepan or alternative options!

Answer 1

handleInputChange(e) {
    let inputValue = e.target.value;
    clearTimeout(this.timeout);
    setTimeout(_ => this.fetchUsers(inputValue), 1000);
}

fetchUsers(value) {
     this.setState({isLoaded: false});
     axios.get(`url_to_get_users_by_name`, {param: value})
        .then((response) => response.json())
        .then(
            (result) => {
              this.setState({
                isLoaded: true,
                items: result.items
              });
            },
            (error) => {
              this.setState({
                isLoaded: true,
                error
              });
            }
          )
        .catch(error => console.log('parsing failed', error))
}