Skip to content

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]
markdown guide
// 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 (
                    <HelmetComponent title={title} />
                    <Component {...this.props} />

I think you have mistakenly used HelmetComponent instead of TitleComponent.


Thanks LuisPa for the post.

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


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

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

Happy Codding :)


I have is problem

TypeError: Cannot call a class as a function

my code


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

You can see the example repo:


Here my code

I did find problem

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



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

code of conduct - report abuse