Как вывести данные с API?

lucky4, обычно "undefined" в качестве значения переменной говорит о том, что ей никогда не было присвоено значение в коде.
Если ItemPage это функциональный реакт-компонент, то его аргумент это props, т.е. атрибуты, которые передаются при использовании компонента. Если значение аргумента (в вашем случае id) это undefined, можно предположить, что при использовании компонента никаких атрибутов он не получает.
----
upd: или получает в id тот же undefined. В общем, искать нужно за пределами этого компонента.

Как вывести данные с API?

400 это "bad request". Т.е. запрос до сервера, таки, дошел. Значит, весь url целиком не может быть undefined.
Приведите сообщение об ошибке целиком, может, это что-нибудь прояснит.

Почему не работает каптча?

Первый вариант. Только это у них на сайте псевдо-код, показывающий, что нужно делать. Вряд ли он заработает, если вы его вставите прямо так.

Нужно в своей системе сделать следующее:

1. Получить из отправленного с фронта запроса токен капчи. Он должен быть доступен в данных формы по ключу "h-captcha-response".
2. Для верификации токена капчи отправить POST запрос на адрес "https://hcaptcha.com/siteverify". В теле запроса должны быть два параметра: { 'secret': SECRET_KEY, 'response': token }.
3. В ответе получите json, распарсите и в поле 'success' найдете результат прохождения капчи (boolean).
4. Выполняете действия в зависимости от результата проверки капчи.

Как перерендерить элементы в return при смене ссылки?

Даниил Чистяков, рад, что всё заработало. Просто полюбопытствую, для чего требуется импортировать скрипт таким образом?

Как перерендерить элементы в return при смене ссылки?

При клике по линку компонент должен перерисоваться с новыми пропсами, и имя фильма будет обновлено из пропсов вот этой строкой const { film } = useParams();

Как перерендерить элементы в return при смене ссылки?

Если name кроме этого компонента больше нигде не используется, то можно стейт вообще не использовать.

import React from 'react';
import { useParams } from "react-router-dom";

import { Helmet, HelmetProvider } from 'react-helmet-async';

const Film = () => {
    const { film } = useParams();

    return (
        <div>
            <Helmet>
                <script src="..."></script>
                <title>{`${ film } читать историю онлайн`}</title>
            </Helmet>
            <div id="block" data-id={`${ film }`}></div>
        </div>
    )
}

export default Film

Как перерендерить элементы в return при смене ссылки?

Долго думал... Чот хз даже, в чем может быть дело. В консоль ошибок не пишет? Другие роуты в приложении нормально работают?

Как перерендерить элементы в return при смене ссылки?

Даниил Чистяков, компонент должен перерисовываться когда name, хранящийся в статусе, изменяется через специальный метод, именуемый у вас setName. Если просто присвоить в name значение, компонент перерисовываться не будет.

Второй вариант, когда ваш компонент будет перерисован, это когда перерисовывается его родитель. Про это сейчас ничего не известно.

И вообще, может быть, я старомоден... Но полагаю, что компонент со статусом и содержащий метод стоит сделать классом.

Как перерендерить элементы в return при смене ссылки?

Даниил Чистяков, у вас setName выполняется только при обновлении страницы. Больше не вижу ничего, что бы его вызывало для перерисовки компонента.

Как практиковать python?

Если нет идей, то и делать ничего не нужно)))

Если вопрос про то, где взять задачи для реализации, то можно поискать на фриланс биржах или на работу устроиться. Но коммерческие проекты это всегда не только python, но и куча всяких сопутствующих технологий. А еще в комплекте дедлайн и заказчик, постоянно меняющий требования )))

Как перерендерить элементы в return при смене ссылки?

Без кода компонента ничего не понятно.

Почему не работает каптча?

Как оказалось, эта хитрая капча не вызывает методов на фронте, как это делает, например, капча гугла. Она при прохождении просто добавляет некоторую информацию в данные формы. Т.е. на фронте никаких видимых действий не происходит, и запрос может быть отправлен в любом случае. Но при его обработке на бэке вы можете проверить результат прохождения капчи и отправить соответствующий ответ.
Подробности в доке: https://docs.hcaptcha.com/

Что делать со своей невнимательностью?

С первого раза и без багов только "hello world" получается))) Все, что сложнее, приходится тестировать и отлаживать. Это нормально, все так делают. Только делать это нужно до выката на прод))
А если на прод пролазят критичные баги, то явно имеется пробел в тестировании кода. Тут надо разбираться в конкретной ситуации, что с этим делать. Но, в любом случае, покрыть код тестами никогда не повредит.

Почему не срабатывает matchHeight?

Что не так? Код по ссылке работает.

Как загрузить страницу потом выполнить скрипт?

Ловить DOMContentLoaded мне кажется подходящим решением.

Как хранить в БД только 5 записей?

+1 за хранение всего и вывод 5 последних. Например, так:

select * from tbl_name offset((select count(*) from tbl_name) - 5);