marmelab / react-admin

A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design
http://marmelab.com/react-admin
MIT License
24.82k stars 5.23k forks source link

Title component usage does not override existing title #6976

Open panfiva opened 2 years ago

panfiva commented 2 years ago

Is your feature request related to a problem? Please describe. I have a page that conditionally renders child components. The page uses react-admin's Title component to set a title. In most cases, when child component is rendered, Title should stay the same as in parent component; however, in some conditions, we want to be able to override page's title from within child.

Today, if both parent and child component have Title rendered, react-admin will just append Title2 to Title1 (will show Title1Title2)

function ParentComponent = (props) => {
 const conditional = props.display? <ConditionalChild /> : null
 return (
   <Fragment>
     <Title title="Title1">
     Welcome to ParentComponent 
     {conditional}
  </Fragment>
  )
}

function ConditionalChild = () => {
 const status = fetch_status()
  if (status===0) 
    return (
     <Fragment>
       <Title title="Title2">
       Status 0
     </Fragment>
    )
  else 
    return (
     <Fragment>
       Other status
     </Fragment>
    )
}

Describe the solution you'd like if a component or its children have multiple Title calls, the last call should win (similar to what react-helmet does while setting page title)

Describe alternatives you've considered No clear solution found

Additional context none

WiXSL commented 2 years ago

This is because react-admin's Title component uses React.createPortal with the AppBar as a container, and when you have multiple contents set in the same container, createPortal behaves this way. I agree this should be enhanced somehow.

panfiva commented 2 years ago

React-helmet has the ability to override previously-set values. Maybe the same approach could work.

https://github.com/nfl/react-helmet