Title component usage does not override existing title
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
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.
React-helmet has the ability to override previously-set values. Maybe the same approach could work.
https://github.com/nfl/react-helmet