onChange в input useState, где будет храниться event.target.value. А затем сможешь его вывести где угодно. Правда здесь значение будет отставать на одно действие в input, поэтому если значение нужно только внутри одной функции, то лучше на onChange вызывать функцию с параметром event.target.value.
UseEffect я наконец смог прописать, что необходимо обновлять скрипт ориентируясь на dependency film.
useEffect(() => {
const script = document.createElement('script');
script.src = '...';
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, [id])name в return, но код действительно уже немного упростил, думаю нужно что-то сделать, чтобы инициировать перезагрузку данного блока и скрипта в return при смене ссылки. Только вот как это сделать - хз.
data-id={`${name}`} и выводится блок с информацией, но когда я перехожу по ссылке, которая ведёт на этот же компонент, но при этом меняется сама ссылка и переменная name, то контент в блоке не меняется, хоть и контент вне этого блока в этом компоненте меняется. Однако, если перезагрузить страницу с новым URL, то контент в блоке меняется.
<div id="block" data-id={`${name}`}></div> меняется в зависимости от того какое значение присвоено data-id. И мне нужно чтобы контент в этом блоке менялся без перезагрузки страницы, при изменении ссылки (при нажатии на какой-либо Link, который меняет значение переменной name).
import React, { useEffect, useState } from 'react'
import { useParams } from "react-router-dom";
import { Helmet, HelmetProvider } from 'react-helmet-async';
const Film = () => {
const { film: id } = useParams();
const [name, setName] = useState(null);
useEffect(() => {
setName(id)
}, [id])
return (
<div>
<Helmet>
<script src="..."></script>
<title>{`${name} читать историю онлайн`}</title>
</Helmet>
<div id="block" data-id={`${name}`}></div>
</div>
)
}
export default Film