I currently structure my React Components the following:
export default class Heading extends Component {
render() {
return (
<h1 onClick={changeLanguage("en_US")}>I am a Heading!</h1>
);
}
}
And now after some research I haven't found any way to define functions inside the Component Class that can be used inside the onClick attribute of something. Everything I found was only for React.createClass or something like that.
You should be able to define the method inside of your component. You will need to wrap your event handler so you can pass an argument to it
export default class Heading extends Component {
changeLanguage(lang){
}
render() {
return (
<h1 onClick={()=>this.changeLanguage("en_US")}>I am a Heading!</h1>
)}
()=> I don't even need a function anymore. Thank you!If the function is outside the render, you would refer to it like so:
export default class Heading extends Component {
changeLanguage = () => {
//do something
}
render() {
return (
<h1 onClick={()=>this.changeLanguage("en_US")}>I am a Heading!</h1>
);
}
}
changeLangue needs to be an arrow function to maintain context.
