Как передать переменную с ребенка в родителя react.js

Question

Хочу разделить страницу на компоненты и у меня есть родитель где есть фетчи которые работают с пагинацией и пагинация.

Родитель:

import PaginationBot from "./paginatonBot";
export let paginationMaxPageCount = 0;
const [arrayCategory, setArrayCategory] = useState([]);

export let paginationMaxPageCount = 0;


function SpecialEquipCatalog(props) {
//Запрос с url страница с пагинацией props.handlePaginate должен быть цифрой

fetch(`http://api.{props.handlePaginate}`, {
                headers: {
                    'Accept': 'application/json',
                    'Authorization': token,
                }
            })
                .then(res => res.json().then(data=> ({data, headers: res.headers})))
                .then((result) => {
                    setCategoryProd(result.data.data)
                    paginationMaxPageCount = +(result.headers.get('X-Pagination-Page-Count'))
                })

// Тут передаю хуки, тоже не уверен правильно или нет

<PaginationBot sets={setArrayCategory} setp={arrayCategory}/>

export default SpecialEquipCatalog;

Я пытаюсь передать в него данные переменой page из ребенка

import {Pagination} from "@mui/material";
import {paginationMaxPageCount} from "./specialEuipmentCatalog";

let page = 1;

const PaginationBot = (props) =>{
    const handlePaginate = (event, value) => {
        page = value;
        props.sets([]);
        console.log(page)
    }

    return(

// пытаюсь передать handlePaginate данные 

        <Pagination handlePaginate={handlePaginate} shape={'rounded'} hideNextButton={true} hidePrevButton={true} onChange={handlePaginate} count={paginationMaxPageCount} />
    )
}

export default PaginationBot;

Пытался оставить page в Родителе но пишет что объект геттер

Answer 1

Решил возможно не самым лучшим образом, но вариант выглядит не плохо.

В родителе я добавил функцию принимающую значение и записал в hook

const [arrayCategory, setArrayCategory] = useState([]); // Массив всех продуктов
const [page, setPage] = useState(1); // Страница пагинации

    const getPage = (page) =>{
        setPage(page)
    }
<PaginationBot getPage={getPage} sets={setArrayCategory} setp={arrayCategory}/>

В child я просто забрал элементы через props

    const handlePaginate = (event, value) => {
        props.getPage(value) // Забрать значение страницы
        props.sets([]); // Обнулить массив
    }

БЛОГ НА HUSL

Как передать переменную с ребенка в родителя react.js

Ответы (1 шт):