Multiple filters with React Hook - Chaining function

Question

Hello I have created a search bar with a multipl filter, it works but the functions are too dependent on each other. The problem here is that the functions are handling multiple cases. would it be possible to lighten each function by chaining them and how ? I don't really get chaining method. thanks

import React, { useState, useEffect } from "react";
import Search from "./Search";
import Anime from "./Anime";
import "./App.css";

const KIJAN_API_URL = "https://api.jikan.moe/v3/top/anime/1/upcoming";
const App = () => {
  const [animes, setAnimes] = useState([]);
  const [sortedAnimes, setSortedAnimes] = useState([]);
  const [searchValue, setSearchValue] = useState("")
  const [filterByType, setFilterByType] = useState("");
  const [filterByYear, setFilterByYear] = useState("");

  useEffect(() => {
    fetch(KIJAN_API_URL)
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error("Something went wrong");
        }
      })
      .then(jsonResponse => {
        setAnimes(jsonResponse.top);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  useEffect(() => {

    const callFilterByType = result => {
      if (filterByType === "") {
        callFilterByYear(result);
        console.log(result);
      } else {
        result = result.filter(anime => anime.type === filterByType);
        callFilterByYear(result);
        console.log(result);
      }
    };

    const callFilterByYear = result => {
      if (filterByYear === "") {
        setSortedAnimes(result);
      } else {
        const regex = new RegExp(`${filterByYear}`, "gi");
        result = result.filter(anime => regex.test(anime.start_date));
        setSortedAnimes(result);
        console.log(result);
      }
    };

    if (searchValue === "") {
      callFilterByType(animes);
    } else {
      const regex = new RegExp(`${searchValue}`, "gi");
      console.log("search : ", searchValue);
      const result = animes.filter(anime => regex.test(anime.title));
      callFilterByType(result);
      console.log(result);
    }


  }, [searchValue, animes, filterByType, filterByYear]);

  return (
    <div className="App">
      <Search
        searchValue={searchValue}
        setSearchValue={setSearchValue}
        filterByType={filterByType}
        setFilterByType={setFilterByType}
        filterByYear={filterByYear}
        setFilterByYear={setFilterByYear}
      />
      {sortedAnimes.length > 0 ? (
        sortedAnimes.map((anime, index) => {
          return <Anime key={index} anime={anime} />;
        })
      ) : (
        <span>Aucune correspondance</span>
      )}
    </div>
  );
};

export default App;

See this other question, simply separate each part of the logic into its own useEffect. — Alvaro
– Alvaro, Commented Sep 19, 2019 at 10:18
Hello @Alvaro thank you for the insight but i don't think that I can't manage data with 3 different useEffect even if they monitor different inputs. The main problem is that the functions must give a result by working together or working separately. If I work on the same array the UseEffect will set the value undefined and therefore I couldn't use them in other useEffectsthat have to work with this value — ArBabacar_
– ArBabacar_, Commented Sep 19, 2019 at 13:47
@ ArBabacar_ maybe refactoring the code will help. Make use of useState and useEffect. Its difficult to tell exactly how, as we dont know where do searchValue, animes, setSortedAnimes come from. — Alvaro
– Alvaro, Commented Sep 19, 2019 at 14:17
Oh Sorry @Alvaro searchValue is coming from my SearchBar component , animes is coming from an API and setSortedAnimes updated the array animes when you apply a filter — ArBabacar_
– ArBabacar_, Commented Sep 19, 2019 at 14:42
Could you share the full component? Im asking because Im not sure if setSortedAnimes belongs to a useState or how is it modifying the fetched animes. — Alvaro
– Alvaro, Commented Sep 19, 2019 at 14:49

ArBabacar_ · Accepted Answer · 2019-09-20 08:44:56Z

6

SandBox Sample You can do first round of simplification like this:

useEffect(() => {
    let result = [...animes];

    if(searchValue) {
      const searchRegex = new RegExp(`${searchValue}`, "gi");
      result = result.filter(anime => searchRegex.test(anime.title));      
    }

    if(filterByType) {
      result = result.filter(anime => anime.type === filterByType);      
    }

    if(filterByYear) {
      const yearRegex = new RegExp(`${filterByYear}`, "gi");
      result = result.filter(anime => yearRegex.test(anime.start_date));
    }
    setSortedAnimes(result);

}, [searchValue, animes, filterByType, filterByYear]);

It can be reduced to more compact form, like:

useEffect(() => {
    const searchRegex = searchValue && new RegExp(`${searchValue}`, "gi");
    const yearRegex = filterByYear && new RegExp(`${filterByYear}`, "gi");
    const result = animes.filter(anime => 
      (!searchRegex || searchRegex.test(anime.title)) &&
      (!filterByType || anime.type === filterByType)) &&
      (!yearRegex || yearRegex.test(anime.start_date))
    )
    setSortedAnimes(result);
}, [searchValue, animes, filterByType, filterByYear]);

More idiomatic way would be use use momoisation hook. i.e. Remove sortedAnimes as state and

const sortedAnimes = useMemo(() => {
    const searchRegex = searchValue && new RegExp(`${searchValue}`, "gi");
    const yearRegex = filterByYear && new RegExp(`${filterByYear}`, "gi");
    return animes.filter(anime => 
      (!searchRegex || searchRegex.test(anime.title)) &&
      (!filterByType || anime.type === filterByType)) &&
      (!yearRegex || yearRegex.test(anime.start_date))
    )
}, [searchValue, animes, filterByType, filterByYear]);

edited Sep 20, 2019 at 8:44

ArBabacar_

1591 gold badge3 silver badges12 bronze badges

answered Sep 20, 2019 at 7:19

ckedar

1,9097 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ckedar Over a year ago

Above useMemo statement is to be used as replacement of [sortedAnimes, setSortedAnimes] = useState([]) statement after other state statement. With useMemo you will not need second effect (which as doing the filtering) in your original code.

ckedar Over a year ago

If you can provide sample working code in some online sandbox, like codesandbox, codepen etc., it would be easy to check.

ArBabacar_ Over a year ago

it's much cleaner know i will clean it even more and i will let you know thank you

Yash Marmat · Accepted Answer · 2021-06-29 15:26:12Z

try this

if you are using filter method inside jsx then you try this method.

Let me brief it, consider userInfo like an object containing fields like name, email, location etc. so, if you want your filter method to provide your search results based on these fields value then you can use something like this in jsx.

    {userInfo.filter((user) => (
                                    
                        user.name.toLowerCase().includes(cloneSearchTerm)
                        ||
                        user.email.toLowerCase().includes(cloneSearchTerm)
                        ||
                        user.location.toLowerCase().includes(cloneSearchTerm)
                    )
    
                    ).map((user, idx) => (
                        <div key={idx}>
                                <span>{user.name}</span>
                                <span>{user.email}</span>
                                <span>{user.location}</span>
                        </div>

                    ))}

Collectives™ on Stack Overflow

Multiple filters with React Hook - Chaining function

2 Answers 2

3 Comments

try this

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

try this

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related