Skip to content

DEV Community

How to add a dynamic title on your React app

LuisPa on February 28, 2019

In this post, I'll show you how to create a simple component to add a dynamic title behavior on your web app. Here you have a repo with an applic...

Read full post

Andy Hoffman • Aug 21 '20

For those using React Hooks, here is the withTitle function:

const withTitle = ({ ChildComponent, title }) => (props) => (
  <>
    <TitleComponent title={title} />
    <ChildComponent {...props} />
  </>
);

Alfredo Salzillo • Mar 1 '19 • Edited

// routes.js

import React from 'react';
import { Route } from 'react-router';
import { TitleComponent } from './TitleComponent.jsx';

// withTitle function
const withTitle = ({ component: Component, title }) => {
    return class Title extends Component {
        render() {
            return (
                <React.Fragment>
                    <HelmetComponent title={title} />
                    <Component {...this.props} />
                </React.Fragment>
            );
        }
    };
};

I think you have mistakenly used HelmetComponent instead of TitleComponent.

LuisPa • Mar 1 '19

Great observation, fixed!

Reben Faraj • Dec 11 '19 • Edited

if you are struggling with integrating helmet title to your project , run this command npm i helmet
once installed

simply copy and paste into a new file called TitleComponent.js in the src folder

// TitleComponent.js
import React from 'react';
import Helmet from 'react-helmet';

const TitleComponent = ({ title }) => {
var defaultTitle = '⚛️ app';
return (

{title ? title : defaultTitle}

);
};

export { TitleComponent };

and in your app.js inside return(
//paste this !!

)
// lets assume that you have a contact page

import {TitleComponent } from './TitleComponent';
paste this into contact page inside a dev
tag

Its really confused me from the beginning, let me know if you need any help with this

Happy Codding :)

Sung M. Kim • Mar 1 '19 • Edited

Thanks LuisPa for the post.

May I ask how HelmetComponent is implemented? I can't seem to find the source in the article 🙏

LuisPa • Mar 1 '19

Sure man! Here you have a repo with an aplicable example: GitHub Repo

Sung M. Kim • Mar 1 '19

✨🌠💫🌟⭐

Denis Souza • May 2 '19 • Edited

I have is problem

TypeError: Cannot call a class as a function

my code

thepracticaldev.s3.amazonaws.com/i...

LuisPa • May 6 '19 • Edited

Hi! Please put here the code from the withTitle() method, please.

You can see the example repo:

github.com/LuisPaGarcia/react-dyna...

Denis Souza • May 7 '19 • Edited

Here my code

thepracticaldev.s3.amazonaws.com/i...

I did find problem

I only did change extends Component to extens React.Component at the TitleComponent

thanks

LuisPa • May 9 '19

Great!

Sereio-do-Brejo • Nov 2 '19

Amazing!!! It also helps to improves SEO!
Thank you for the post.

Christan Foden • Mar 6 '20 • Edited

Could you do the same with the favicon?

LuisPa • Dec 7 '21

Sure!