How to trigger GET after POST in React so new item would show without reloading page

I have App component where the list of items is shown, and ModalForm where you can add a new one. But when I’m adding new item I have to reload the page to see it in my list. I want to trigger somehow my GET method after I execute my POST method.

**App.js**
const App = () => {
    let books = useAxiosGet(API_URL)
    //some code

    return (
        //some code
        <ModalForm />
    );
}

    **ModalForm.js**
    const ModalForm = () = > {
        //some logic for opening modal form

        function submit(e) {
            e.preventDefault();
            axios.post(API_URL, {
                name: data.name,
                description: data.description,
                count: data.count,
                imageURL: data.imageURL,
                price: data.price
            })
            .then(res => {
                // document.location.reload();
                // here I want to trigger GET
                console.log(res.data);
            })
            .catch((err) => {
                console.log(err);
            })
        setData({
            name: "",
            description: "",
            count: "",
            imageURL: "",
            price: ""
        })
    }

    function handle(e){
        const newData={...data}
        newData[e.target.id] = e.target.value
        setData(newData)
        console.log(newData)
    }

    return (//some code);
}

>Solution :

You should use React State to store your books.

https://ar.reactjs.org/docs/state-and-lifecycle.html

1. Make a state for books

const App = () => {
    // Books storage.
    const [books, setBooks] = useState([]);
}

2. Make a function that loads the books.

const App = () => {
    // Books storage.
    const [books, setBooks] = useState([]);

    // Load books
    const loadBooks = () => {
        const response =  useAxiosGet(API_URL);
        setBooks(response );
    }
}

3. Loads the books when component mound using useEffect hook.
   https://ar.reactjs.org/docs/hooks-effect.html

const App = () => {
    // Books storage.
    const [books, setBooks] = useState([]);

    // Load books
    const loadBooks = () => {
        const response =  useAxiosGet(API_URL);
        setBooks(response );
    }

    // Load books when component mount.
    useEffect(loadBooks, [])
}

4. In your submit function, after the submission success, you can just call loadBooks again.

const submit = () => {
    ...
    .then(() => {
        loadBooks();
     })
}