React Redux Localization in the Class Component - reactjs

Question

I am developing a React Application and I added React Redux Localization library from AlternativaPlatform for localization and text translation to my application. The library works fine for simple text because I will need to call <Translate value="hello" /> every time I want to translate the text and this component will return the string within the <span></span> tag. I am having trouble to translate all texts which are defined in the class component. I have done a research and read the documentation but I did not find a solution since yesterday.
What I have been trying to do, I created the following files in my project;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { localeReducer } from 'react-redux-localization';
import App from './App';
import './index.css';
const rootReducer = combineReducers({ locale: localeReducer });
const store = createStore(rootReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
App.js
import React, { Component } from 'react';
import './App.css';
import { BrowserRouter, Route } from 'react-router-dom';
import Home from './components/Home';
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Route exact path="/" component={Home} />
</div>
</BrowserRouter>
);
}
}
export default App;
Home.js
import React, { Component } from 'react';
import NavigationBar from './Navbar';
import Footer from './Footer';
/*
* Home component
*/
export default class Home extends Component {
render() {
return (
<div>
<NavigationBar />
<Footer />
</div>
);
}
}
Navbar.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { NavLink } from 'react-router-dom';
import { Nav, Navbar, NavItem, OverlayTrigger, Popover, InputGroup, Button, FormControl, Tooltip, Glyphicon } from 'react-bootstrap';
import { localize } from 'react-redux-localization';
import translations from './translation/data-translations.json';
import Switcher from './translation/Switcher';
import Translate from './translation/Translate';
/*
* Navigation bar Component
*/
class NavigationBar extends Component {
render() {
return (
<Navbar fixedTop>
<Navbar.Header>
<Navbar.Brand>
<NavLink to="/"><img alt="logo" src="/logo.png" className="cfn-logo" /></NavLink>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<div className="top-navigation">
<Nav>
<NavItem eventKey={1} href="https://twitter.com/code4africa" target="_blank"><Translate value="Get_in_touch" /></NavItem>
<OverlayTrigger trigger="click" placement="bottom" overlay={<EmbedPopup />} rootClose={true}>
<NavItem eventKey={2} href="#"><Translate value="Embed_this" /> <i className="fa fa-caret-down" aria-hidden="true"></i></NavItem>
</OverlayTrigger>
<NavItem className="navitem-divider"></NavItem>
<NavItem eventKey={3} href=" https://facebook.com" target="_blank">
<i className="fa fa-facebook" aria-hidden="true"></i>
</NavItem>
<NavItem href="https://twitter.com" target="_blank">
<i className="fa fa-twitter" aria-hidden="true"></i>
</NavItem>
</Nav>
<div className="language-switcher-btns">
<Switcher />
</div>
</div>
</Navbar.Collapse>
</Navbar >
);
}
}
export default localize(translations)(NavigationBar);
And the Translate component as;
./traslation/Translate.js
import React from 'react';
import { localize } from 'react-redux-localization';
import translations from './data-translations.json';
const Translate = ({ l , value}) => (
<span>{l(value)}</span>
);
export default localize(translations)(Translate);
By calling the Translate component as <Translate value="hello" /> it will return the translated value based on the locale BUT inside <span></span> tag. I tried to remove the <span></span> in the Translate component but it does not compile.