After finding a useful code snippet on this page to switch languages, I attempted to enhance it by incorporating material UI components for better styling. However, whenever I change the language, it redirects me back to the home page because the MenuList component I'm utilizing does not support the onChange prop like the select element in the original code.
So, my question is: How can I implement the onChange functionality with this third-party component?
The unmodified code looks like this:
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Language extends Component {
static contextTypes = {
language: PropTypes.object,
}
state = {
value: '',
}
componentDidMount() {
const { language } = this.context
this.setState({
value: language.locale || language.detected,
})
}
handleChange = event => {
const { language } = this.context
const { originalPath } = language
const { value } = event.target
if (value === this.state.value) {
return
}
this.setState({ value }, () => {
localStorage.setItem('language', value)
window.location.href = `/${value}${originalPath}`
})
}
render() {
const { language } = this.context
const { languages } = language
const { value } = this.state
if (!value) {
return null
}
return (
<select value={value} onChange={this.handleChange}>
{languages.map(({ value, text }) => (
<option key={value} value={value} >
{text}
</option>
))}
</select>
)
}
}
export default Language
On the other hand, my modified version doesn't function properly due to the fact that MenuList doesn't support the onChange prop:
return (
<MenuList value={value} onChange={this.handleChange}>
{languages.map(({ value, text }) => (
<MenuItem key={value} value={value} >
<Link to={value}>
{text}
</Link>
</MenuItem>
))}
</MenuList>
)
To explore further and see the issue firsthand, you can check out the codesandbox. The crucial file here is src/component/language.js: https://codesandbox.io/s/mo75j2jxyx