Issues With Filtering and Re-Displaying Data ReactJS

I’m trying to filter through the RandomUser api to display either males or females. My current issue is that I can’t display the filtered data like I did the original data.

Here’s my current code:

  const [data, setData] = useState('');
  const [gender, setGender] = useState('');
  

  useEffect(() => {
    fetch(`https://randomuser.me/api/?results=500`)
    .then(response => response.json())
    .then(setData);
  }, [])
  


  const FilterData = () => {
    if(gender) {
      var searchedResult
      searchedResult = data.results.filter(
        (e) => e.gender === gender
      );
      console.log(searchedResult)
      console.log(gender)
      setData([searchedResult])
    }
  }


  if(data.results){


    return (
      <div>

        <div>
          <select name="Gender" onChange={(e) => setGender(e.target.value)}>
            <option value="male">Male</option>
            <option value="female">Female</option>
          </select>
          <button onChange={FilterData()}></button>
        </div>

        <ul>
        {data.results.map(results => (

          <li key={results}>
            <p>{results.name.first} {results.name.last}</p>
            <img src={results.picture.medium}></img>
          </li>
        ))}
        </ul>

      </div>
    )
  }
else{
  return(
    <div>loading...</div>
  )
}
}

I think my issue applies to how I originally setup my html with my if/else statement leading to the html constantly showing ‘loading…’ if I don’t have data.results but I’m not too sure on how I’d apply that to my new filtered array

Answer

The way I would approach this is by setting your fetched data in state.

Then create another state called something like filteredData as to not mutate your fetched data. Once you filter the data, you want a way to go back to the original data to filter it differently.

On selection of a gender, filter through your fetched data and set filteredData as an array of people objects with your selected gender.

If filteredData exists (which gets set by a useEffect when gender is changed), map over that to display your data. If there is no gender selected (and therefore, no filteredData, map over data.results array.

Check out this jsfiddle