Как сделать так чтобы react перерендерил разметку по условию?

Question

У меня есть родительский компонент, в нем я принимаю пропсами язык, в зависимости от языка я должен рендерить разметку. В скрипте я подключаю jivo chat. После смены языка в данный момент у меня виджет не меняется на другой язык, но если я перезагружу страницу то подгружается уже язык какой мне нужен. Как мне добиться поведения когда при смене языка у меня менялся бы виджет?

Компонент с виджетом:

type Props = {
    lang?: string | null;
};

export const Jivo = (props: Props) => {
    const { lang } = props;

    return (
        <>
            {lang === 'ru' ? (
                <script src='//code.jivo.ru/widget/v0tzhy0uhW' async></script>
            ) : (
                <script src='//code.jivo.ru/widget/sIH7pKEUXN' async></script>
            )}
        </>
    );
};

Answer 1

Создать для компонента состояние и повесить useEffect, который будет срабатывать при изменении props.lang и сохранять данные в состояние компонента.

При изменении состояния, произойдет ререндер

export const Jivo = (props: Props) => {
    const [lang, setLang] = useState(props.lang);

    useEffect(() => {
        setLang(lang);
    }, [props.lang]);

    return (
        <>
            {lang === 'ru' ? (
                <script src='//code.jivo.ru/widget/v0tzhy0uhW' async></script>
            ) : (
                <script src='//code.jivo.ru/widget/sIH7pKEUXN' async></script>
            )}
        </>
    );
};

БЛОГ НА HUSL

Как сделать так чтобы react перерендерил разметку по условию?

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