Changing the value of an element onclick in ReactJS

Question

I have a Material UI submenu being populated from a json. The Main menu item holding this submenu array will be changed according to what is being selected. See image below

The Main menu item holding the submenus looks like this

    <MenuItem
        primaryText={this.state.selectedLanguage.name}
        rightIcon={<ArrowDropRight />}
        style={{userMenuItem}}
        leftIcon={
            <img className="flag" src={this.state.selectedLanguage.icon}/>
        }
        menuItems={languageMenu} //see below
    />

The nested menus are coming from here

    const languageMenu =
        <div>
            {languages.map((item, index) => (
                <MenuItem
                    key={index}
                    onClick={this.onLanguageChange}
                    primaryText={languages[index].name}
                    style={{userMenuItem}}
                    leftIcon={
                        <img className="flag" src={languages[index].icon}/>
                    }/>
            ))}
        </div>

And ultimately, the data is stored in a json like this

const languages = [
    {
        name: 'English',
        icon: './assets/images/flags/uk.png',
        link: ''
    },
    {
        name: 'Español',
        icon: './assets/images/flags/Spain.png',
        link: ''
    },
    {
        name: 'Français',
        icon: './assets/images/flags/France.png',
        link: ''
    }
 ...
];

In my poor understanding of React, I created an initial value for the slected language in the constructor state

constructor(props) {
    super(props);
    this.state = {          
        selectedLanguage:{
            name:"English",
            icon:"./assets/images/flags/uk.png",
        },
    }
}

and a function that will handle the changing (this is my problem area, I'm sure)

onLanguageChange = () => this.setState(
    {
        selectedLanguage: this.state.selectedLanguage.name,
    }
);

I need to build this onChange() function correctly to alter the state based on the submenu clicked. This will give me the groundwork to build other properties that will trigger a translate feature on click as well

Any help will be appreciated. Thanks

Binding state to MainMenu button like how do you do it in LanguageMenu <img className="flag" src={this.state.selectedLanguage.icon}/> when state change, notify and it change. Read facebook.github.io/react-native/docs/state.html — botika
– botika, Commented May 20, 2017 at 20:28
@botika I changed a few things around. I was able to initiate the value by the state, so that's good because it now reads the state. I can't figure out how to build the onLanguageChange() so that it changes the state values — LOTUSMS
– LOTUSMS, Commented May 20, 2017 at 21:19

Sulthan · Accepted Answer · 2017-05-20 21:25:22Z

1

The action needs a parameter - the new language:

onLanguageChange = languageName => this.setState({
    selectedLanguage: languageName
});

and you need to pass it from onClick:

{languages.map((language, index) => (
    <MenuItem
         key={index}
         onClick={() => this.onLanguageChange(language.name)}
         primaryText={language.name}
         style={{userMenuItem}}
         leftIcon={
             <img className="flag" src={language.icon}/>
         }
    />
))}

I am not sure if you want to store language in your state or just the name. Both ways have their uses.

answered May 20, 2017 at 21:25

Sulthan

130k23 gold badges223 silver badges277 bronze badges

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

5 Comments

LOTUSMS Over a year ago

This cleared up my submenus. It first said language is not defined which I get it because I dont have language anywhere so I used languages (the name of my json data but this resulted in a blank output in the submenus

LOTUSMS Over a year ago

By the way, the menuitem you posted is the submenu list building a repeater with all the languages in the data and dynamically creating that many menuitems. The click event should take place here but the one that needs to change is the MenuItem in my first block which is the parent menu. The image would give you a visual. Sorry if my code seems unclear. I was trying to avoid putting too much code on here

Sulthan Over a year ago

@LOTUSMS The language is the first parameter of map, which you originally had as item. It doesn't matter where your state is read or stored, it can be used by both your components. Maybe you want to the action to the parent component and keep the state there?

LOTUSMS Over a year ago

AH! My appologies, I missed that little detail. Ok, the language not defined error went away, but not, when I click on a submenu (i.e portuguese) the main menu is blank. No Errors, It just not receiving the new values. Could it be the onClick() is not updating the state? The main menu is reading from the state.

Sulthan Over a year ago

@LOTUSMS Maybe you want to pass the whole language object to state? e.g. this.onLanguageChange(language)? That's what I was not sure about.

botika · Accepted Answer · 2017-05-21 00:43:29Z

1

Something like this

const languages = [...]


constructor(props) {
    super(props);
    this.state = {          
        selectedLanguage: 0
    }
}

onLanguageChange = (index) => this.setState({ selectedLanguage: index });

const mainMenu =    
    <MenuItem
            primaryText={languages[this.state.selectedLanguage].name}
            rightIcon={<ArrowDropRight />}
            style={{userMenuItem}}
            leftIcon={
                <img className="flag" src={languages[this.state.selectedLanguage].icon}/>
            }
            menuItems={languageMenu} //see below
    />

const languageMenu =
    <div>
        {languages.map((item, index) => (
            <MenuItem
                key={index}
                onClick={this.onLanguageChange(index)}
                primaryText={languages[index].name}
                style={{userMenuItem}}
                leftIcon={
                    <img className="flag" src={languages[index].icon}/>
                }/>
        ))}
    </div>

edited May 21, 2017 at 0:43

answered May 20, 2017 at 21:47

botika

5013 silver badges14 bronze badges

8 Comments

LOTUSMS Over a year ago

I updated my code in my orginal question. I don't know if you noticed that before. But the state has both name & icon initiated values there and are being passed to the main menu item. All I need now is for the oinClick to update the state values based on the answer from Sulthan.

botika Over a year ago

Sorry, I forgot one s

LOTUSMS Over a year ago

Sulthan answer got it working. But you did help me understand the initial build. I appreciate it +1

botika Over a year ago

But is not necessary pass the object to the state when you already have it as a global instance, you are duplicating instances. You're welcome

LOTUSMS Over a year ago

I will take a look at it. ;)

|

Collectives™ on Stack Overflow

Changing the value of an element onclick in ReactJS

2 Answers 2

5 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related