How to dynamically change the “title” of “app”, ba

Question

I have this code, please see the title prop:

const App = () => (
  <Admin
    theme={theme}
    customRoutes={customRoutes}
    menu={Menu}
    dataProvider={loopbackRestClient(window.apiUrl)}
    authProvider={authClient()}
    dashboard={Dashboard}
    locale="en"
    i18nProvider={i18nProvider}
    title={`Dashboard - ${window.accountData ? window.accountData.accommodation.name : ''}`}
  >
  // more code here...

This tries to change the rendered title when login succeeds and therefore we get different accommodation.name value from there.

I was expecting that the component may re-render with this event, since login affects the REDUX state, so the window variable (which changed after login) should render a different title.

It did not work.

How may we do it the proper way (react-redux way)?

Answer 1

You should save that accountData you currently have on the window object in the Redux store in its own Reducer. And when your LOGIN Action is fired I would update that accountData with the new data.

Answer 2

You can make a custom and connected Title component and pass it as the title prop.

https://codesandbox.io/s/1072ry6rl7

Note that my custom Title component has to support a className prop. This is a material-ui requirement.