ReactJS - onClick doesn't call the fucntion inside map() function

Question

I'm new to React and I can't figure out how I can call a function inside through onClick() on a map loop. Let me show you:

  const changeLang = lang => {
    i18n.changeLanguage(lang);
  };

I have this function who is responsible to get me languages like English or Portuguese. And what I'm trying to do with the following code is change the language depending on which menu item I choose from a menu. To do this I have the following code:

const languages = [
  {
    value: 'pt',
    label: 'Portuguese',

  },
  {
    value: 'en',
    label: 'English',
  }
];

...
{languages.map(option => (
    <MenuItem key={option.value} value={option.value} onClick={() => this.changeLang (option.value)}>
        {option.label}
    </MenuItem>
))}

The problem is that it can't enter in my function changeLang, so the language is not chosen, no effect at all. I've tried the console.log and I get nothing in return. I'm pretty sure the problem is on onClick={() => this.changeLang (option.value)}, but I can't figured out why. Can you help me?

Possible duplicate of [OnClick Event binding in React.js](https://stackoverflow.com/questions/27397266/onclick-event-binding-in-react-js) — norbitrial, Oct 17 '19 at 11:46
yes it is, I just didn't introduce all code because it was useless for the question. — Pedro Relvas, Oct 17 '19 at 11:49
can you please check if 'this' has 'changeLang' function. You can do it by this onClick={() => console.log(this.changeLang)} — Swaroop Deval, Oct 17 '19 at 11:49
If this is a class based component then you need to bind `this` based on the docs: https://reactjs.org/docs/handling-events.html — norbitrial, Oct 17 '19 at 11:51

A.K. · Answer 1 · 2019-10-17T11:57:36.880

1

If this is functional component then remove this keyword and call directly changeLang function

languages.map(option => (
    <MenuItem key={option.value} value={option.value} onClick={() => changeLang(option.value)}>
        {option.label}
    </MenuItem>
))

edited Oct 17 '19 at 11:57

answered Oct 17 '19 at 11:53

A.K.

547
1
7
22

Did that sir, nothing happens – Pedro Relvas Oct 17 '19 at 11:55

score 0 · Answer 2 · answered Oct 17 '19 at 11:50

0

This is a functional component, so you need to call changeLang and not this.changeLang

answered Oct 17 '19 at 11:50

Hamza El Aoutar

5,292
2
17
23

Did that... nothing happens. – Pedro Relvas Oct 17 '19 at 11:52
Can you elaborate on `nothing happens`? – Hamza El Aoutar Oct 17 '19 at 11:55
when I click in the menu item, nothing happens, like no action no console.log. It just doesn't enter in the function "changeLang" – Pedro Relvas Oct 17 '19 at 11:58
Did you configure `react-i18next` – Hamza El Aoutar Oct 17 '19 at 12:01
Can you replicate the issue in a sandbox and share it? – Hamza El Aoutar Oct 17 '19 at 13:30

Mathieu · Answer 3 · 2019-10-17T11:59:57.263

0

What kind of error do you see in your console?

I immediately see a possible issue with your changeLang : you are not returning anything from it. Arrow function have an implicit return only when not using braces syntax :

I also see this typo :

this.changeLang (option.value)

should be

this.changeLang(option.value)

No space between the function call and its arguments.

Maybe you can try these avenues of investigation, and / or post more details about your component.

edited Oct 17 '19 at 11:59

answered Oct 17 '19 at 11:56

Mathieu

725
5
19

No error sir, It just doesn't call the fuction changeLang. – Pedro Relvas Oct 17 '19 at 11:57
Did you try fixing the typo, too ? And as others have mentioned, we would need to see the whole component to offer more help. – Mathieu Oct 17 '19 at 12:03

ReactJS - onClick doesn't call the fucntion inside map() function

3 Answers3