How to create dynamic header in meteor.js with react

It’s important to reduce the code a professional project, so now we will see how to create a dynamic header/navbar for a project which will use on every page.

So, at first, need to create a javascript file into the imports/ui/ folder, let’s create this which name as like DynamicHeader.js & write some codes as like below

import React from 'react';
import {Link} from 'react-router-dom'

const DynamicHeader = (props) => {
  return (
    <div className="header">
      <div className="header__content">
        <h1 className="header__title">{props.title}</h1>
        <ul className="navbar-nav">
           <Link className="nav-link" to="/">Home</Link>
           <Link className="nav-link" to="/search">Search</Link>
        </ul>
        <button className="button button--link-text">Logout</button>
      </div>
    </div>
  );
};

export default DynamicHeader;

Now we will render this constant function into my pages where need the same navigation, so see the below example

import React from 'react';
import DynamicHeader from './DynamicHeader';

export default () => {
  return (
    <div>
      <DynamicHeader title="Home Page"/>
      <div className="page-content">
        <h1>Home Page</h1>
        <p>Etc....</p>
      </div>
    </div>
  );
};

Using this example we can add the same header into every page where actually we need.

Happy coding 🙂