How to reuse component in react?

In react we can reuse any component and  repeat again and again as below code:

Componentfile.js

import React from 'react'

export default (props) => <div className={props.cls}><img src={props.mysrc} alt={props.alt} /></div>

pagefile.js

export default () => {

const textDetails = {

        animals:[

            {cls:'xyz', mysrc:'./xyz1.png', alt:'Xyz'},

            {cls:'abc', mysrc:'./abc2.png', alt:'Abc'},

            {cls:'cda', mysrc:'./cda.png', alt:'Cda'}

        ],

        dogs:[

            {cls:'dogs1', mysrc:'./puppy.png', alt:'Dog'},

            {cls:'dogs2', mysrc:'./puppyNew.png', alt:'Puppy'}

        ]

    }

const rendertextDetails = (items) => {

        return items.map(item => <BannerImages cls={item.cls} mysrc={images(item.mysrc)} alt={item.alt} />)

 }

return(

        <> 

{ rendertextDetails(textDetails.animals)}

{ rendertextDetails(textDetails.dogs)}

</>

)

}

 .............................................................................................

Another way to reuse one component again and again.

Here is one component and you can use where you need to link with ul li and also we have to define image code but this image not call every where because we are using conditions with the ternary operators.

navlist.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;

headerfile.js

import React,{Component} from 'react';

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

export default class Footer extends Component{

    state = {

        footerList :[

            {name:'Home', href:'index.html'},

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

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

        ],

        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>

        );

    }

}