Import React, {useEffect, useState} from 'react'; import './Categories.scss' import '../../consts.js' import {Dropdown, List,

Question

Import React, {useEffect, useState} from 'react'; import './Categories.scss' import '../../consts.js' import {Dropdown, List,

Pagination} from 'semantic-ui-react';
import axios from "axios";

export default function App() {
const [categories, setCategories] = useState([]);
const [activePage, setActivePage] = useState(1);
const [apiUrl, setApiUrl] = useState(window.createCategoryUrl);
const [pages, setPages] = useState(1)
const perPage = [10, 25, 50, 100]

useEffect( () => {
axios.get(apiUrl).then(response => {
setCategories(response.data.categories)
setPages(response.data.pages);
});
}, [apiUrl]);

const onChange = (e, pageInfo) => {
setActivePage(pageInfo.activePage);
setApiUrl('127.0.0.1:3001/categories/?page=' + pageInfo.activePage.toString());
};

const items = categories.map((category) =>
<li key={category.id}>
{category.name}
</li>
);

return (
<div className="categories">
<div>
<Dropdown
placeholder={perPage[0]}
defaultValue={perPage[0]}
fluid
selection
options={perPage.map(numb => ({key: numb, text:numb, value: numb }))}
/>
<h3 className="bold">All categories</h3>
<List>{items}</List>
</div>

<div className="categories">
<Pagination
size='mini'
siblingRange={1}
activePage={activePage}
onPageChange={onChange}
totalPages={pages}
/>
</div>
</div>
);
}
Добрый день, кто может подсказать:
1. Как при смене в дропдауне передавать в get значение per_page и задействовать запрос
2. Чтобы в url также отображалось "?page= " и "?per_page= ", так же если вручную указать эти значения - ничего не изменится