title: Why the filter does not return the list on the initial render?
body: <p>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 <code>filteredList</code>. But I don't know if it is the right thing to set the fetched data to two arrays.</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  const PersonDetail = ({ person }) =&gt; {
    return (
      &lt;div&gt;
        Id: {person.id} &lt;br /&gt;
        Name: {person.name} &lt;br /&gt;
        Phone: {person.phone}
      &lt;/div&gt;
    );
  };
  
  const App = () =&gt; {
    const [personsList, setPersonsList] = useState([]);
    const [personObj, setPersonObj] = useState({});
    const [showPersonDetail, setShowPersonDetail] = useState(false);
    const [newPerson, setNewPerson] = useState(&quot;&quot;);
    const [filter, setFilter] = useState(&quot;&quot;);
    const [filteredList, setFilteredList] = useState(personsList);
  
    useEffect(() =&gt; {
      fetch(&quot;https://jsonplaceholder.typicode.com/users&quot;)
        .then((response) =&gt; response.json())
        .then((data) =&gt; {
          setPersonsList(data);
          //setFilteredList(data) &lt;-- I have to add this to work
          console.log(data);
        });
    }, []);
    const handleClick = ({ person }) =&gt; {
      setPersonObj(person);
      if (!showPersonDetail) {
        setShowPersonDetail(!showPersonDetail);
      }
    };
  
    const handleChange = (event) =&gt; {
      setNewPerson(event.target.value);
    };
  
    const handleSubmit = (event) =&gt; {
      event.preventDefault();
      const tempPersonObj = {
        name: newPerson,
        phone: &quot;123-456-7890&quot;,
        id: personsList.length + 1,
      };
      setPersonsList((personsList) =&gt; [...personsList, tempPersonObj]);
      //setFilteredList(personsList) &lt;-- to render the list again when add new person
      setNewPerson(&quot; &quot;);
    };
  
    const handleFilter = (event) =&gt; {
      setFilter(event.target.value);
      const filteredList =
        event.target.value.length &gt; 0
          ? personsList.filter((person) =&gt;
              person.name.toLowerCase().includes(event.target.value.toLowerCase())
            )
          : personsList;
      setFilteredList(filteredList);
    };
  
    return (
      &lt;div&gt;
        &lt;h2&gt;List:&lt;/h2&gt;
        Filter{&quot; &quot;}
        &lt;input value={filter} onChange={handleFilter} placeholder=&quot;Enter&quot; /&gt;
        &lt;ul&gt;
          {filteredList.map((person) =&gt; {
            return (
              &lt;li key={person.id}&gt;
                {person.name} {&quot;&quot;}
                &lt;button onClick={() =&gt; handleClick({ person })}&gt;View&lt;/button&gt;
              &lt;/li&gt;
            );
          })}
        &lt;/ul&gt;
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;input
            placeholder=&quot;Add Person&quot;
            value={newPerson}
            onChange={handleChange}
          /&gt;
          &lt;button type=&quot;submit&quot;&gt;Add&lt;/button&gt;
        &lt;/form&gt;
        {showPersonDetail &amp;&amp; &lt;PersonDetail person={personObj} /&gt;}
      &lt;/div&gt;
    );
  };
  
  export default App;
  
  </code></pre>