Cleaner, better way to pass function callback and state to a child component in React?

  javascript, reactjs

Right now I am passing a callback function and the current state to a child component from my Parent component. I just feel like the way I write it is ugly or at least could be prettier. Here is the Parent component where I am passing all that (parentCallback={[moreReviews, limit]} in the return):

const Reviews: FunctionComponent = () => {
    const [filter, setFilter] = useState([1, 2, 3, 4, 5]);
    const [order, setOrder] = useState('date_desc');
    const [reviews, setReviews] = useState([]);
    const [limit, setLimit] = useState(1);

    let variables = {
        offset: 0,
        limit: limit,
        filter: filter,
        order: order
    }

    const {data: dataReviews, loading: loadingReviews, error: errorReviews} = useQuery(GetReviews, {
        ssr: false,
        variables: variables,
        fetchPolicy: "no-cache"
    });
  
    useEffect(() => {
        console.log('action going on deps change');

        if (!loadingReviews && !errorReviews && dataReviews) {
            setReviews(!loadingReviews && !errorReviews && dataReviews ? dataReviews.reviews[0].reviews : []);
        }
    }, [dataReviews]);

    function moreReviews(limit: number) {
        setLimit(limit);
    }
        
    return reviews.length ? (
        <div>
            <div className={`${styles.netreviews_review_rate_and_stars}`}>
                <ReviewsSideInfo/>
                <ReviewsContainer reviews={reviews} parentCallback={[moreReviews, limit]} />
            </div>
        </div>
    ) : <div/>;
};
export default Reviews;

And then in my child component I’m accessing it like so :

<button onClick={() => parentCallback[0](parentCallback[1] + 1)}></button>

That is definitely ugly but its working fine.

Also, and probably more importantly, is a better, more efficient way to do that, from a technical point of view ?
Thanks

Source: Ask Javascript Questions

LEAVE A COMMENT