Duplicated header in web page using React

Question

I have created Home.js to display home page with Service as one component inside. Header.js is reusable for both Home and Service. I have imported successfully Header to both Service and Home but when I come back to Home, the header is duplicated because it takes one from Service page to display in Home. Please help me to fix that.

Home.js

import React, { Component } from 'react';

//Re-usable components
import Header from '../Common/Header';
import Services from '../Common/Services';
import Portfolio from '../Common/Portfolio';
import Timeline from '../Common/Timeline';
import Team from '../Common/Team';
import Contact from '../Pages/Contact';
import Footer from '../Pages/Footer';
// import Client from '../Common/Client';
import img from '../Common/assets/img/bakingcareer.jpg';


class Home extends Component {
    render() {
        return ( 
            <div>
                <Header
                // Add any props you want to modify the header 
                // title = 'WHENEVER I BAKE. BAKE WITH MY HEART'
                subtitle = "LOVE WITH BAKING"
                buttonText = "CHECK OUT SERVICE"
                link = '/services'
                showButton = { true }
                image = { img }
                />

                <Services / >
                <Portfolio / >
                <Timeline / >
                <Team / > 
                { /* <Client /> */ } 
                <Contact / >
                <Footer / >

            </div>



        )
    }
}

export default Home;

Service.js

import React, { Component } from 'react';
import SingleService from './SingleService';

//Re-usable items
import Footer from '../Pages/Footer';
import Contact from '../Pages/Contact';
import Header from '../Common/Header';
import image from './assets/img/baking.jpeg';


const services = [{
        title: 'Birthday',
        description: 'A cake for small birthday party for your kids or just friends',
        icon: 'fa-shopping-cart'
    },

    {
        title: 'Family outing',
        description: 'A perfect cake for any family picnic over the weekend or school break',
        icon: 'fa-laptop'
    },

    {
        title: 'Daily basis',
        description: 'Enjoy a cupcake or just a dozen of macarons ',
        icon: 'fa-lock'
    }
];

class Services extends Component {
    render() {
        return ( 
                <div>
                {/* Adding the header to the Service page but now in the main page header is duplicated*/}
                <Header 
                    // title = 'DAN BAKERY'
                    subtitle = "ALL ABOUT OUR BEAUTIFUL SERVICES"
                    buttonText = "CHECK OUT PRODUCT"
                    link = "/"
                    showButton ={true}
                    image = {image}
                />    

                {/* display the service  */}
                <section className = "page-section" id="services" >
                    <div className = "container" >
                    <div className = "row" >
                    <div className = "col-lg-12 text-center" >
                        <h2 className = "section-heading text-uppercase" > Services < /h2> 
                        <h3 className = "section-subheading text-muted" > Enjoy our lovely cakes! < /h3> 
                    </div > 
                    </div> 
                    <div className = "row text-center" > 
                    {/* map through the array */}
                    {services.map((service, index) => {
                        return <SingleService {...service }
                        key = { index }
                        />
                    })
                    }
                    </div> 
                    </div > 
                </section>


                </div>






        )
    }
}

export default Services;

Header.js

import React, { Component } from 'react';
// import HeaderItem from './HeaderItem';
import { Link } from 'react-router-dom';
import '../css/style.css';




class Header extends Component {
    render() {
        return ( 
            <header className = "masthead" style = {{ backgroundImage: 'url("' + this.props.image + '")' } } >
                <div className = "container" >
                <div className = "intro-text" >
                <div className = "intro-lead-in" > { this.props.title } < /div>  
                <div className = "intro-heading  text-uppercase" > { this.props.subtitle } </div>  
                {this.props.showButton &&
                    <Link className = "btn btn-primary btn-xl text-uppercase js-scroll-trigger" to = { this.props.link }>{ this.props.buttonText }</Link>
                }

                </div>  
                </div >  
            </header>
        )
    }
}

export default Header;

Answer 1

Pass noHeader prop to Services when used inside Home and in Services render Header conditionally:

class Home extends Component {
    render() {
        return ( 
            <div>
                ...    
                <Services noHeader / >
                ...
            </div>

/

class Services extends Component {
    render() {
        return ( 
                <div>
                {/* render header only if "noHeader" is not present */}
                { this.props.noHeader || <Header 
                    // title = 'DAN BAKERY'
                    subtitle = "ALL ABOUT OUR BEAUTIFUL SERVICES"
                    ...
                /> }

Answer 2

You need to use the Header component on routes only. Here you have the Header component on the Home component and also on the Services component. I believe the Header will be on all pages of the website, so use it only on the components that will serve as routes(i.e pages).

Answer 3

Why you use header component inside services components ? we need always to maximize cohesion and minimize coupling according to Pete Hunt in his conference : React: Rethinking best practices -- JSConf EU

The solution :

Use services component for your routing but inside it put two components : component number one will be our header component and the second will be services-comp component contains the rest inside services component in your code.

and in the home page you will include the header and services-comp components not the parent who contains these two components :)

Please read more about separation of concern:

What is separation of concern? separation of concerns (SoC) is a design principle for separating a computer program into distinct sections, such that each section addresses a separate concern — Wikipedia

I suggest these two helpful links :

https://www.youtube.com/watch?v=x7cQ3mrcKaY

https://medium.com/@tamrat/react-rethinking-best-practices-b298053275ff

Thank you .