Как получить стейт внутри props.children?

Question

[arklight]

Есть следующий кейс

function ComponentB(props) {
  let [state, setState] = useState({title: 'asd'})
  return <div>{props.children}</div>;
}

function ComponentA() {
  return (
    <ComponentB>
      {(state???????) => (
        <header>{state.title}</header>
      )}
    </ComponentB>
  );
}

Как можно в props.children достучаться до стейта ComponentB, чтобы в header вывелся title?

Answer 1

[arklight]

Вот так вот делаем и должно всё работать

function ComponentB(props) {
  let [state, setState] = useState({ title: "ТАЙТЛ" });
  return <div>{props.children({ state, setState, props })}</div>;
}

function ComponentA() {
  return (
    <ComponentB url="asd">
      {(a) => (
        <header>
          {a.state.title}
          {a.props.url}
        </header>
      )}
    </ComponentB>
  );
}

Comments

[Евгений Полинов]

single responsibility
Стейт менеджмент наверное лучше вынести и проблемы с пробрасыванием пропсов у вас не будет (Redux)
Удачи