meta-tagsreact-helmet

My React-Helmet isn't working in my login component?


I don't understand what I am doing wrong with introducing React-Helmet to my website's components.

I already installed react-helmet using terminal command: npm install --save react-helmet

There are NO "title" or "description" tags inside my index.html file.

Here is the condensed Component Code inside a .js file:

    ...
    import { Helmet } from 'react-helmet';

    class LoginFullscreen extends Component {
                
    ...
                return (

                    <div className='login-fullscreen-background'>

                      <Helmet>
                          <title>Unlocked Academy: Login to the Platform</title>
                          <meta name="description" content="Welcome to Unlocked Academy!  Login here to access your account and prepare the flashcards you will engage with after each phone unlock and passing screen time!" />
                      </Helmet>

                      ...

                    </div>
                    
                 );
                 
                 ...

}

Here is my index.html file:

<!DOCTYPE html>
    <html lang="en">
       <head>
           <meta charset="utf-8" />
           <link rel="icon" href="%PUBLIC_URL%/Favicon32x32.png" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <meta name="theme-color" content="#000000" />

           <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
       </head>

       <body style="background-color: #3A3149;">
   
           <noscript>I'm So Sorry, but Unlocked Academy requires you to have JavaScript enabled to run.
           </noscript>

           <div id="root">
           </div>
    
    
       </body>



    </html>

enter image description here

enter image description here


Solution

  • It works just fine for me when I tried. However if you right click and view page source you won't be able to see it. But if you open your developer tools and check the Elements, you will see all of it.

    Here is an example: https://stackblitz.com/edit/react-cmjz7v

    enter image description here