Skip to content
loading...

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 (
                <React.Fragment>
                    <HelmetComponent title={title} />
                    <Component {...this.props} />
                </React.Fragment>
            );
        }
    };
};

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
tag

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

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

 

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

You can see the example repo:

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

 

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

 

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

 
code of conduct - report abuse