PageTitle.ts

import { Trans } from '@lingui/react'
import React, { Children } from 'react'


interface IProps {
  children: ReactNode | string
}

interface IState {
  refs: React.RefObject<Trans>[]
}

export class PageTitle extends React.Component<IProps, IState> {
  state: IState = { refs: [] }
  static getDerivedStateFromProps(nextProps: IProps) {
    return {
      refs: Children.map(nextProps.children, child => React.createRef<Trans>()),
    }
  }
  updateTitle() {
    // @ts-ignore side effect
    document.title = this.state.refs
      // @ts-ignore
      .map(ref => ref.current.getWrappedInstance().getTranslation())
      .join(' - ')
  }
  componentDidMount() {
    this.updateTitle()
  }
  componentDidUpdate() {
    this.updateTitle()
  }
  render() {
    const { children, ...props } = this.props
    return (
      <>
        {typeof children !== 'string' &&
          React.Children.map(children, (child, i) =>
            React.cloneElement((child as ReactNode)!, {
              ref: this.state.refs[i],
            }),
          )}
        <h1 {...props}>{children}</h1>
      </>
    )
  }
}