Mixing
How can I pass “onChange” in a component that doesn't accept this props?
I am using the code from this link for the purpose of switching language, but I tried adapting it to use material UI components for styling. Changing language works, but it takes me back to the home page on every change because the MenuList component I use doesn't accept onChange props, unlike the select in the original code.
My question is: how can I pass onChange props in this third-party component?
Original code:
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
My variation that doesn't really work because MenuList doesn't accept onChange props:
return (
<MenuList value={value} onChange={this.handleChange}>
{languages.map(({ value, text }) => (
<MenuItem key={value} value={value} >
<Link to={value}>
{text}
</Link>
</MenuItem>
))}
</MenuList>
)
You can check in codesandbox, the important file here is src/component/language.js: https://codesandbox.io/s/mo75j2jxyx
javascript reactjs material-ui
asked Nov 21 '18 at 7:23
moluskenmolusken
135
add a comment |
I am using the code from this link for the purpose of switching language, but I tried adapting it to use material UI components for styling. Changing language works, but it takes me back to the home page on every change because the MenuList component I use doesn't accept onChange props, unlike the select in the original code.
My question is: how can I pass onChange props in this third-party component?
Original code:
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
My variation that doesn't really work because MenuList doesn't accept onChange props:
return (
<MenuList value={value} onChange={this.handleChange}>
{languages.map(({ value, text }) => (
<MenuItem key={value} value={value} >
<Link to={value}>
{text}
</Link>
</MenuItem>
))}
</MenuList>
)
You can check in codesandbox, the important file here is src/component/language.js: https://codesandbox.io/s/mo75j2jxyx
javascript reactjs material-ui
asked Nov 21 '18 at 7:23
moluskenmolusken
135
add a comment |
I am using the code from this link for the purpose of switching language, but I tried adapting it to use material UI components for styling. Changing language works, but it takes me back to the home page on every change because the MenuList component I use doesn't accept onChange props, unlike the select in the original code.
My question is: how can I pass onChange props in this third-party component?
Original code:
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
My variation that doesn't really work because MenuList doesn't accept onChange props:
return (
<MenuList value={value} onChange={this.handleChange}>
{languages.map(({ value, text }) => (
<MenuItem key={value} value={value} >
<Link to={value}>
{text}
</Link>
</MenuItem>
))}
</MenuList>
)
You can check in codesandbox, the important file here is src/component/language.js: https://codesandbox.io/s/mo75j2jxyx
javascript reactjs material-ui
asked Nov 21 '18 at 7:23
moluskenmolusken
135
I am using the code from this link for the purpose of switching language, but I tried adapting it to use material UI components for styling. Changing language works, but it takes me back to the home page on every change because the MenuList component I use doesn't accept onChange props, unlike the select in the original code.
My question is: how can I pass onChange props in this third-party component?
Original code:
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
My variation that doesn't really work because MenuList doesn't accept onChange props:
return (
<MenuList value={value} onChange={this.handleChange}>
{languages.map(({ value, text }) => (
<MenuItem key={value} value={value} >
<Link to={value}>
{text}
</Link>
</MenuItem>
))}
</MenuList>
)
You can check in codesandbox, the important file here is src/component/language.js: https://codesandbox.io/s/mo75j2jxyx
javascript reactjs material-ui
javascript reactjs material-ui
asked Nov 21 '18 at 7:23
moluskenmolusken
135
asked Nov 21 '18 at 7:23
moluskenmolusken
135
edited Nov 21 '18 at 10:15
molusken
asked Nov 21 '18 at 7:23
moluskenmolusken
135
asked Nov 21 '18 at 7:23
moluskenmolusken
135
asked Nov 21 '18 at 7:23
moluskenmolusken
135
135
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
MenuItem has an onClick prop. You can use that. The click event handler can be like this:
handleClick = event => {
const { value } = event.currentTarget;
};
You can refer here for Menu examples.
answered Nov 21 '18 at 7:28
curlyBracescurlyBraces
920411
you can even use native select
– klvenky
Nov 21 '18 at 7:31
<MenuItem key={value} value={value} onClick={this.handleChange} > that way? I'm getting undefined
– molusken
Nov 21 '18 at 7:35
@molusken give a demo link. Where is the undefined coming??
– klvenky
Nov 21 '18 at 8:18
@molusken I have updated the answer. Can you try this?
– curlyBraces
Nov 21 '18 at 8:40
@klvenky check the codesandbox here codesandbox.io/s/mo75j2jxyx The language.js is inside src/components
– molusken
Nov 21 '18 at 10:03
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53407074%2fhow-can-i-pass-onchange-in-a-component-that-doesnt-accept-this-props%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
MenuItem has an onClick prop. You can use that. The click event handler can be like this:
handleClick = event => {
const { value } = event.currentTarget;
};
You can refer here for Menu examples.
answered Nov 21 '18 at 7:28
curlyBracescurlyBraces
920411
you can even use native select
– klvenky
Nov 21 '18 at 7:31
<MenuItem key={value} value={value} onClick={this.handleChange} > that way? I'm getting undefined
– molusken
Nov 21 '18 at 7:35
@molusken give a demo link. Where is the undefined coming??
– klvenky
Nov 21 '18 at 8:18
@molusken I have updated the answer. Can you try this?
– curlyBraces
Nov 21 '18 at 8:40
@klvenky check the codesandbox here codesandbox.io/s/mo75j2jxyx The language.js is inside src/components
– molusken
Nov 21 '18 at 10:03
|
show 1 more comment
MenuItem has an onClick prop. You can use that. The click event handler can be like this:
handleClick = event => {
const { value } = event.currentTarget;
};
You can refer here for Menu examples.
answered Nov 21 '18 at 7:28
curlyBracescurlyBraces
920411
you can even use native select
– klvenky
Nov 21 '18 at 7:31
<MenuItem key={value} value={value} onClick={this.handleChange} > that way? I'm getting undefined
– molusken
Nov 21 '18 at 7:35
@molusken give a demo link. Where is the undefined coming??
– klvenky
Nov 21 '18 at 8:18
@molusken I have updated the answer. Can you try this?
– curlyBraces
Nov 21 '18 at 8:40
@klvenky check the codesandbox here codesandbox.io/s/mo75j2jxyx The language.js is inside src/components
– molusken
Nov 21 '18 at 10:03
|
show 1 more comment
MenuItem has an onClick prop. You can use that. The click event handler can be like this:
handleClick = event => {
const { value } = event.currentTarget;
};
You can refer here for Menu examples.
answered Nov 21 '18 at 7:28
curlyBracescurlyBraces
920411
MenuItem has an onClick prop. You can use that. The click event handler can be like this:
handleClick = event => {
const { value } = event.currentTarget;
};
You can refer here for Menu examples.
answered Nov 21 '18 at 7:28
curlyBracescurlyBraces
920411
edited Nov 21 '18 at 8:39
answered Nov 21 '18 at 7:28
curlyBracescurlyBraces
920411
answered Nov 21 '18 at 7:28
curlyBracescurlyBraces
920411
answered Nov 21 '18 at 7:28
curlyBracescurlyBraces
920411
920411
you can even use native select
– klvenky
Nov 21 '18 at 7:31
<MenuItem key={value} value={value} onClick={this.handleChange} > that way? I'm getting undefined
– molusken
Nov 21 '18 at 7:35
@molusken give a demo link. Where is the undefined coming??
– klvenky
Nov 21 '18 at 8:18
@molusken I have updated the answer. Can you try this?
– curlyBraces
Nov 21 '18 at 8:40
@klvenky check the codesandbox here codesandbox.io/s/mo75j2jxyx The language.js is inside src/components
– molusken
Nov 21 '18 at 10:03
|
show 1 more comment
you can even use native select
– klvenky
Nov 21 '18 at 7:31
<MenuItem key={value} value={value} onClick={this.handleChange} > that way? I'm getting undefined
– molusken
Nov 21 '18 at 7:35
@molusken give a demo link. Where is the undefined coming??
– klvenky
Nov 21 '18 at 8:18
@molusken I have updated the answer. Can you try this?
– curlyBraces
Nov 21 '18 at 8:40
@klvenky check the codesandbox here codesandbox.io/s/mo75j2jxyx The language.js is inside src/components
– molusken
Nov 21 '18 at 10:03
you can even use native select
– klvenky
Nov 21 '18 at 7:31
you can even use native select
– klvenky
Nov 21 '18 at 7:31
<MenuItem key={value} value={value} onClick={this.handleChange} > that way? I'm getting undefined
– molusken
Nov 21 '18 at 7:35
<MenuItem key={value} value={value} onClick={this.handleChange} > that way? I'm getting undefined
– molusken
Nov 21 '18 at 7:35
@molusken give a demo link. Where is the undefined coming??
– klvenky
Nov 21 '18 at 8:18
@molusken give a demo link. Where is the undefined coming??
– klvenky
Nov 21 '18 at 8:18
@molusken I have updated the answer. Can you try this?
– curlyBraces
Nov 21 '18 at 8:40
@molusken I have updated the answer. Can you try this?
– curlyBraces
Nov 21 '18 at 8:40
@klvenky check the codesandbox here codesandbox.io/s/mo75j2jxyx The language.js is inside src/components
– molusken
Nov 21 '18 at 10:03
@klvenky check the codesandbox here codesandbox.io/s/mo75j2jxyx The language.js is inside src/components
– molusken
Nov 21 '18 at 10:03
|
show 1 more comment
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53407074%2fhow-can-i-pass-onchange-in-a-component-that-doesnt-accept-this-props%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
