public\locales\bn\translation.json =>

{
  "Home":{
        "Welcome": "প্রতিক্রিয়া এবং প্রতিক্রিয়া- i18next এ স্বাগতম",
        "wishlist": "ইচ্ছার তালিকা",
        "cart": "কার্ট",
        "profile": "প্রোফাইল",
        "logout": "প্রস্থান",
        "loginfo": "লগ তথ্য",
        "product_page":"পণ্য পৃষ্ঠাতে স্বাগতম"
       }
}


public\locales\en\translation.json =>



{
  "Home":{
      "Welcome": "Welcome to React and react-i18next",
       "wishlist": "WishList",
       "cart": "Cart",
       "profile": "Profile",
       "logout": "Logout",
       "loginfo": "Loginfo",
       "product_page":"Welcome to Product Page"
  }
}

src/i18n.js =>

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
// don't want to use this?
// have a look at the Quick start guide
// for passing in lng and translations on init
const languages =['en','bn']
i18n
    // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
    // learn more: https://github.com/i18next/i18next-http-backend
    .use(Backend)
    // detect user language
    // learn more: https://github.com/i18next/i18next-browser-languageDetector
    .use(LanguageDetector)
    // pass the i18n instance to react-i18next.
    .use(initReactI18next)
    // init i18next
    // for all options read: https://www.i18next.com/overview/configuration-options
    .init({
        fallbackLng: 'en',
        debug: true,
         whitelist:languages,
        interpolation: {
            escapeValue: false, // not needed for react as it escapes by default
        }
    });


export default i18n;

TopMenu.js =>

import React, {Component} from "react";
import {Link} from "react-router-dom";
import {Col, Nav,NavDropdown} from 'react-bootstrap';
import  '../../css/topmenublock.css';

import RegistrationModal from "./RegistrationModal";
import LoginModal from "./LoginModal";

import '../../i18n' ;
import { useTranslation } from 'react-i18next';

class TopMenu extends Component {
	constructor(props) {
		super(props);
		//console.warn("totalInBagItemInTopmenu",this.props.bagItemPOne);
		console.warn("data",this.props.bagItemPOne);
		//alert("totalInBagItemInTopmenu"+this.props.bagItemPOne);
	}

	logout(){
         localStorage.removeItem("auth");

	}



  render() {

	  const CustomTomMenu =(props)=>{
		  const { t } = useTranslation();

			  return (

				<Nav variant="pills" className="float-right">

				  <Nav.Item>

					<button className="mr-2 nav-link cartButton" onClick={this.props.click}>

						{t('Home.cart')}
						 <i className="fa fa-shopping-cart green" aria-hidden="true"></i> {this.props.bagItemPOne}</span>

					</button>
				  </Nav.Item>
				  <NavDropdown title={t('Home.loginfo')} id="nav-dropdown" >
					  <ul>
						  {
						  	localStorage.getItem("auth") ?
								<>
								   <li><Link to="/profile">{t('Home.profile')}</Link></li>
								   <li>this.logout()}>{t('Home.logout')}</li>
								</>
								: <>
								    <li><LoginModal /></li>
									<li><RegistrationModal /></li>
						           </>
						  }


					  </ul>

				</NavDropdown>
				</Nav>
			  );
	  }
    return (        
    <Col xs={12} sm={12} md={3} lg={3} xl={3} className="nopadding5 ">
		<<ustomTomMenu />        
      </Col>
    );
  }
}

export default TopMenu;