Doesn't redraw the users array?

Question

JavaScript

Greetings to everyone, tell me why it doesn’t redraw when targetValue === "" , like I check by state , targetValue = "", however, this setState does not transfer the user array obtained from the api again to the state, although the logic is written through an if condition, and also tell me , how to make it look for matches every time a character changes, that is, when a character is deleted, matches are also searched .. I have a match search implemented through string.match() however it does not always work correctly ... work... thanks!

import React from "react";
import "./LiveSearch.css";
import * as axios from "axios";
class LiveSearch extends React.Component {
  state = {
    users: [],
    targetValue: "",
  };

  handleChange(e) {
    e.preventDefault();
    let value = e.target.value;
    console.log(e.target.value);
    this.setState(() => {
      return { targetValue: value };
    });

    if (this.state.targetValue.length > 0) {
      this.setState(() => {
        let newUsers = this.state.users.filter((el) => {
          return el.name.match(this.state.targetValue);
        });
        console.log(newUsers);
        return { users: newUsers };
      });
    }
    if (this.state.targetValue === "") {
      axios
        .get(`https://social-network.samuraijs.com/api/1.0/users?count=20`)
        .then((response) => {
          console.log(response);
          this.setState(() => {
            return { users: response.data.items };
          });
        });
    }
    console.log(this.state.users);
  }

  componentDidMount() {
    axios
      .get(`https://social-network.samuraijs.com/api/1.0/users?count=20`)
      .then((response) => {
        console.log(response);
        this.setState(() => {
          return { users: response.data.items };
        });
      });
  }
  render() {
    return (
      <div className="searcher-container">
        <p>Живой Поиск</p>
        <input
          onChange={(e) => this.handleChange(e)}
          type="text"
          placeholder="Введите значение"
        />
        <div>
          <ul>
            {this.state.users.map((el, index) => {
              return <li key={index}>{el.name}</li>;
            })}
          </ul>
        </div>
      </div>
    );
  }
}

export default LiveSearch;

Answer 1

setState is an asynchronous method, if you did setState({ targetValue: value }), then this does not mean that in the next line you will have the actual value of this.state.targetValue:

handleChange(e) {
    e.preventDefault();
    const value = e.target.value;
    console.log(e.target.value);
    this.setState(() => {
      return { targetValue: value };
    });

    if (value.length > 0) {
      this.setState((prevState) => {
        const newUsers = prevState.users.filter((el) => {
          return el.name.match(value);
        });
        console.log(newUsers);
        return { users: newUsers };
      });
    }
    if (value === "") {
      axios
        .get(`https://social-network.samuraijs.com/api/1.0/users?count=20`)
        .then((response) => {
          console.log(response);
          this.setState(() => {
            return { users: response.data.items };
          });
        }, () => console.log(this.state.users)); // тут будут новые users
    }
    console.log(this.state.users); // тут не будет новых users
  }