Как отрендерить компонент из другого?

Question

[SideWest]

Есть массив

const dialogs = [
    { name: 'Vlas', id: 1253533, messages: [ 'привет', 'и тебе привет', 'как дела?', 'нормально, а твои?' ] },
    { name: 'Oleg', id: 1432344, messages: [ 'привет', 'и тебе привет', 'как дела?', 'нормально, а твои?' ] },
    { name: 'Dima', id: 1274563, messages: [ 'привет', 'и тебе привет', 'как дела?', 'нормально, а твои?' ] }
]

let AcDialog = 0
// потом выбираю диалог dialogs[ AcDialog ]

Есть структура

function Container () {
    return (
        <div className='container'>
            <Infoheader />
            <Messages />
            <MessageInput />
            <NextButton />
        </div>
    )
}

По нажатию на

NextButton

должен меняться индекс массива и заного рендериться всё остальное уже с другим именем, id и сообщениями

Вот сам компонент кнопки

const NextButton = () => {
    return <button onClick={() => {
        AcDialog += 1
        console.log( AcDialog );
    }} className='nextButton' > Next</button >
}

Я перепробовал много вариантов, но так и не смог реализовать ререндер всех компонентов по нажатию на кнопку,

Я использую хуки и каждый компонент у меня это отдельная стрелочная функция, не хочу пихать всё в один класс

Пожалуйста, подскажите как это всё правильно и лучше реализовать

Answer 1

[Robur]

любые данные от которых зависит рендер надо класть в стейт и менять через соответствующие функции.
Если вы используете хуки, то
const [AcDialog, setAcDialog] = useState(0)

менять через setAcDialog.

Дальнейшие детали зависят от того как именно вы организовали остальное

Comments

[SideWest]

Так и сделал, поставил хуки в главном элементе и передал функцию изменения (setAcDialog) как пропсы в компонент кнопки