score:0

Accepted answer
const RecipeCards = (props) => {
    //const inputTypingRef = useRef(null);
    let preparingElement = props.localRecipes;
    let finalElement;
    const [enteredFilter, setEnteredFilter] = useState(props.searchInput);
    let elementsSorted;
    const [elementsFiltered, setElementsFiltered] = useState();
    const refTimer = useRef();
    const filterActive = useRef(false);
    let cardElement;

    useEffect(() => {
        setEnteredFilter(props.searchInput);
        console.log("updating filter");
    }, [props.searchInput]);

    const filterRecipes = (recipes) => {
        if (enteredFilter && !filterActive.current) {
            console.log("begin filtering");
            if (refTimer.current !== null) {
                clearTimeout(refTimer.current);
            }
            refTimer.current = setTimeout(() => {
                refTimer.current = null;

                if (props.searchOption !== "all") {
                    setElementsFiltered(recipes.filter((rec) => {
                        return rec.props[props.searchOption].includes(enteredFilter);
                    }))
                } else {
                    setElementsFiltered(recipes.filter((rec) => {
                        return rec.props.includes(enteredFilter);
                    }))
                }
                filterActive.current = true;
                console.log(elementsFiltered);
            }, 600);
        }else if(!enteredFilter && filterActive.current){
            filterActive.current = false;
            setElementsFiltered();
        }
        finalElement = elementsFiltered ? elementsFiltered : recipes;
    };

    const ingredientCountSort = (recipes) => {
        console.log("sorting elements");
        elementsSorted = recipes.sort((a, b) => {
            ...
        filterRecipes(elementsSorted);
    };

    const elementRender = (element) => {
        console.log("building JSX");
        cardElement = element.map((rec) => (
            <RecipeCard
                name={rec.name}
                key={rec.id}
                ingredients={rec.ingredients}
                tags={rec.tags}
                removeRecipe={() => props.onRemoveIngredients(rec.id)}
                checkAvail={props.localIngredients}
            />
        ));
        ingredientCountSort(cardElement);
    };

    //begin render ///////////////////          ///         ///         ///         ///         ///

    elementRender(preparingElement);
    console.log(finalElement);

    return (
        <div className={classes.RecipeCards}>{!finalElement[0] ? <BeginPrompt /> : finalElement}</div>
    );
};

score:0

import React, { useState } from 'react'
const RecipeCards = (props) => {
....
const [ elementsSorted, setElementsSorted ] = useState();

const ingredientCountSort = () => {
     ...
    setElementsSorted(...whatever values elementsSorted supposed to be here)
  
}

Related Query

More Query from same tag