CODEWITHSUNDEEP
javascriptreactjs
tomatito
tomatito

Reputation: 411

run function from child component reactjs

Layout.js file is an hoc something like this:

import React, { Component } from 'react';
import { I18n } from 'react-i18next';

class Layout extends Component {
.
.
.
render() {
  return (
    <I18n ns="translations">
      {(t, { i18n }) => (
        <Aux>
          <Toolbar
            blablabla
          />
          <SideDrawer
            blablabla
          />
          <main className={classes.Content}>{this.props.children}
          </main>
        </Aux>
       )}
     </I18n>
    );
  }
}

export default Layout;

Toolbar.js is a stateless component something like this:

import React from 'react';
import NavigationItems from '../NavigationItems/NavigationItems';
.
.
const toolbar = props => {
  <nav className={classes.DesktopOnly}>
    <NavigationItems isAuthenticated={props.isAuth} />
  </nav>
}
export default toolbar;

NavigationItems.js is something like this:

import React from 'react';
import NavigationItemMenu from './NavigationItemMenu/NavigationItemMenu';
import i18n from '../../../i18n';

const navigationItems = props => (
 <ul className={classes.NavigationItems}>
    <NavigationItemMenu>
      {i18n.t('Navigation.NavigationItems.NavigationItems.languaje')}
    </NavigationItemMenu>
 </ul>
);
export default navigationItems;

ultimately NavigationItemMenu.js is something like this:

import React, { Component } from 'react';
import i18n from '../../../../i18n';
.
.
class NavigationItemMenu extends Component {
 .
 .
 .
 render() {
   return (
     <MenuList role="menu">
       <MenuItem onClick={this.handleClose('en')}>    
         {i18n.t('Navigation.NavigationItems.NavigationItems.en')}
       </MenuItem>
     </MenuList>
   )
  }
}
export default NavigationItemMenu;

The question is: If i run this code:

<button onClick={() => i18n.changeLanguage('en')}>en</button>

in layout.js works like a charm. You can take a look to example in this link:

https://github.com/i18next/react-i18next/blob/master/example/react_renderProps/src/App.js

However, if i try run this code in last file NavigationItemMenu.js something like this:

<MenuItem
  onClick={(this.handleClose, () => i18n.changeLanguage('en'))           
  {i18n.t('Navigation.NavigationItems.NavigationItems.en')}
</MenuItem>

It doesn't work. The langiaje is not changed, Where is it the error?

Pd. Sorry i'm newbie with react!

Thank a lot!

Upvotes: 1

Views: 73

Answers (1)

ztadic91
ztadic91

Reputation: 2804

The onClick syntax looks weird.

Try 

<MenuItem
  onClick={() => {
      this.handleClose();
      i18n.changeLanguage('en')
  }}           
/>
  {i18n.t('Navigation.NavigationItems.NavigationItems.en')}
</MenuItem>

Upvotes: 1

Related Questions