What I have is a list that was fetched from an api. This list will be filtered based on the input. But at the first render it will render nothing, unless I press space or add anything to the input. Another solution is set the fetched data to the filteredList. But I don't know if it is the right thing to set the fetched data to two arrays.

import React, { useState, useEffect } from "react";
const PersonDetail = ({ person }) => {
  return (
    <div>
      Id: {person.id} <br />
      Name: {person.name} <br />
      Phone: {person.phone}
    </div>
  );
};

const App = () => {
  const [personsList, setPersonsList] = useState([]);
  const [personObj, setPersonObj] = useState({});
  const [showPersonDetail, setShowPersonDetail] = useState(false);
  const [newPerson, setNewPerson] = useState("");
  const [filter, setFilter] = useState("");
  const [filteredList, setFilteredList] = useState(personsList);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => {
        setPersonsList(data);
        //setFilteredList(data) <-- I have to add this to work
        console.log(data);
      });
  }, []);
  const handleClick = ({ person }) => {
    setPersonObj(person);
    if (!showPersonDetail) {
      setShowPersonDetail(!showPersonDetail);
    }
  };

  const handleChange = (event) => {
    setNewPerson(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const tempPersonObj = {
      name: newPerson,
      phone: "123-456-7890",
      id: personsList.length   1,
    };
    setPersonsList((personsList) => [...personsList, tempPersonObj]);
    //setFilteredList(personsList) <-- to render the list again when add new person
    setNewPerson(" ");
  };

  const handleFilter = (event) => {
    setFilter(event.target.value);
    const filteredList =
      event.target.value.length > 0
        ? personsList.filter((person) =>
            person.name.toLowerCase().includes(event.target.value.toLowerCase())
          )
        : personsList;
    setFilteredList(filteredList);
  };

  return (
    <div>
      <h2>List:</h2>
      Filter{" "}
      <input value={filter} onChange={handleFilter} placeholder="Enter" />
      <ul>
        {filteredList.map((person) => {
          return (
            <li key={person.id}>
              {person.name} {""}
              <button onClick={() => handleClick({ person })}>View</button>
            </li>
          );
        })}
      </ul>
      <form onSubmit={handleSubmit}>
        <input
          placeholder="Add Person"
          value={newPerson}
          onChange={handleChange}
        />
        <button type="submit">Add</button>
      </form>
      {showPersonDetail && <PersonDetail person={personObj} />}
    </div>
  );
};

export default App;

CodePudding user response：

Your filtered list is actually something derived from the full persons list. To express this, you should not create two apparently independent states in this situation.

When your asynchronous fetch completes, the filter is probably already set and you are just setting personsList which is not the list you are rendering. You are rendering filteredList which is still empty and you are not updating it anywhere, except when the filter gets changed.

To avoid all of this, you could create the filtered list on each rendering and — if you think this is not efficient enough — memoize the result.

const filteredList = useMemo(() => 
    filter.length > 0
        ? personsList.filter((person) =>
            person.name.toLowerCase().includes(filter.toLowerCase())
          )
        : personsList,
    [filter, personsList]
);

When the filter input gets changed, you should just call setFilter(event.target.value).

This way, you will always have a filtered list, independent of when your asynchronous person list fetching completes or when filters get updated.

Side note: Writing const [filteredList, setFilteredList] = useState(personsList); looks nice but is the same as const [filteredList, setFilteredList] = useState([]); because the initial value will be written to the state only once, at that's when the component gets initialized. At that time personsList is just an empty array.