[Question] How to propagate a state into a component in a tab

[trustin]

Hi! Thanks a lot for creating rc-dock first of all. It's exactly what I was looking for!

I have one question about it though. I wrote an application component that looks like the following, which loads a few resources from a remote server and updates its states once loaded:

const App: React.FunctionComponent<Props> = (props) => {
  const [foo, setFoo] = useState<Foo>(initialFoo);
  const [bar, setBar] = useState<Bar>(initialBar);

  // Load foo and bar from a remote source.
  useEffect(() => {
    (async () => {
      ...
      setFoo(newFoo);
      setBar(newBar);
    })();
  }, []);

  return (
    <DockLayout>
      defaultLayout={{
        dockbox: {
          mode: 'horizontal',
          children: [
            {
              tabs: [
                { id: "foo", title: "Foo", content: <Foo value={foo} /> }
              ]
            },
            {
              tabs: [
                { id: "bar", title: "Bar", content: <Bar value={bar} /> }
              ]
            }
          ]
        }
      }}
      style={{...}}
    </DockLayout>
  );
};

However, it looks to me that the state foo and bar are not propagated to <Foo /> and <Bar /> components I specified in the defaultLayout property.

Is this the expected behavior? If so, what's the correct way to propagate these properties to the components in the tabs? If not, what am I doing wrong? I basically want <Foo /> and/or <Bar /> to be re-rendered when foo and/or bar are updated, but <Foo /> shouldn't be re-rendered when only bar is updated for sure.

[rayman-de]

I just stumbled on the same problem. I believe that the easiest way around this limitation is to create a context in App that can then be consumed by Foo and Bar.