run function from child component reactjs

Question

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!

Not an exact answer, I know but you may want to keep states and commit them from anywhere in your application, most common one is redux. Have you had a look at it? — vahdet
– vahdet, Commented Mar 6, 2018 at 13:40

ztadic91 · Accepted Answer · 2018-03-06 13:55:37Z

1

The onClick syntax looks weird.

Try

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

answered Mar 6, 2018 at 13:55

ztadic91

2,8041 gold badge17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tomatito Over a year ago

Yes, you're right, i'm gonna loose my head. The problem was onClick event. Thank you!

Collectives™ on Stack Overflow

run function from child component reactjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related