Изменение стейта сестренского компонента через родительский | react

Question

есть компонентная структура.

Компонент 1 в котором происходит генерация пропов для компонента 2 и 3

Как при нажатии на кнопки внутри 2 элемента, изменять состояние 3го элемента?

Answer 1

В Component1 создаем состояние и передаем его в Component3. А в Component2 передаем функцию, которая может изменять это состояние.

import React, { useState } from 'react';

const Component1 = () => {
  const [state, setState] = useState(null);

  return (
    <div>
      <Component2 updateData={setState} />
      <Component3 data={state} />
    </div>
  );
};

const Component2 = ({ updateData }) => {
  return <button onClick={() => updateData('clicked')}>Click me</button>;
};

const Component3 = ({ data }) => {
  return <div>{data}</div>
};

БЛОГ НА HUSL

Изменение стейта сестренского компонента через родительский | react

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