How to use one component with multiple pages in react

One component using in the multiple pages as like need to use the navigation in the header section, sidebar and footer section but we need the image in the footer the section as a social icon or as your requirement. So here is an available image with condition-based. if-else condition in the react example below:

Componentfile.js

import React from 'react';

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

var images = require.context('../../images');

const Navlinks = (props) => {

    const renderImg = () => props.mySrc ? <img src={images(props.mySrc)} alt={props.myAlt} title={props.myTitle} /> : null

    return(

        <li>

            <Link to={props.linkss} title={props.titl}>

                {props.linkName}

                {renderImg()}

            </Link>

        </li>

    )

}

export default Navlinks;

pagefile.js

import React,{Component} from 'react';

import Navlinks from '../header/navlist';

export default class Footer extends Component{

    state = {

        footerList :[

            {name:'Home', href:'/index'},

            {name:'About', href:'/about'},

            {name:'Services', href:'/services'},

            {name:'Contact', href:'/contact'}

        ],

        socialFIcon :[

            {img:'./footer-facebook.png', alt:'Facebook', titt:'Facebook'},

            {img:'./footer-twitter.png', alt:'Twitter', titt:'Twitter'},

            {img:'./footer-youtube.png', alt:'Youtube', titt:'Youtube'}

        ]

    }

    renderFooterList = () => {

        return this.state.footerList.map(item => <Navlinks linkName={item.name} linkss={item.href} />)

    }

    rendersocialFIcon = () => {

        return this.state.socialFIcon.map(item => <Navlinks mySrc={item.img} myAlt={item.alt} myTitle={item.titt} /> )

    }

    render(){

        return(

            <div>

                <div className="socialFooter">

                    <ul>

                        {this.rendersocialFIcon()}

                    </ul>

                </div>

                <ul>

                    {this.renderFooterList()}

                </ul>

            </div>

        )

    }

}

otherpagefile.js

import React,{Component} from 'react';

import Navlinks from './navlist';

export default class Header extends Component{

    state = {

        navlistss: [

            {name:'Home', href:'/index'},

            {name:'About', href:'/about'},

            {name:'Services', href:'/services'},

            {name:'Contact', href:'/contact'}

        ]

    }

    readerList = () => {

        return this.state.navlistss.map(item => <Navlinks linkName={item.name} linkss={item.href} />);

    }

    render(){

        return(

            <div>

                <ul>

                    {this.readerList()}

                </ul>

            </div>

        );

    }

}