I'm new to React and am working on an already-existing component that seems a bit old.
I have a label element I want to set dynamically, depending on state. To this affect I have:
export default class Address extends React.Component {
// Props and other handlers
componentTitle() {
if (this.state.isPostal) {
return this.state.labels.PostalAddressLabel
}
else {
return this.state.labels.StreetAddressLabel
}
};
render() {
return (
<div className="block">
<div className="grid-x">
<div className="input-field cell">
<label
dangerouslySetInnerHTML={{ __html: componentTitle() }}
/>
// Other elements
}
}
However, this does not work. I get the error
Uncaught ReferenceError: componentTitle is not defined
I've tried various combination of this including
Using a var const compTitle = componentTitle() {
placing the function within the render() function
And removing the function altogether and putting the if/else condition in the render() function, eg:
if (this.state.isPostal) {
const compTitle = this.state.labels.PostalAddressLabel
}
else {
const compTitle = this.state.labels.StreetAddressLabel
}
return (
<div className="block">
<div className="grid-x">
<div className="input-field cell">
<label
dangerouslySetInnerHTML={{ __html: compTitle }}
But I just can't get it to work.
Could anyone point me in the right direction?
In this code:
if (this.state.isPostal) {
const compTitle = this.state.labels.PostalAddressLabel
}
else {
const compTitle = this.state.labels.StreetAddressLabel
}
You the variable compTitle only lives within the scope it's defined - which is between the curly braces. So, after the if statement, that variable no longer exists.
I suspect you want something like this:
const compTitle = this.state.isPostal
? this.state.labels.PostalAddressLabel
: this.state.labels.StreetAddressLabel
return (
<div className="block">
<div className="grid-x">
<div className="input-field cell">
<label>{compTitle}</label>
Easiest way to do this is the using ternary operator.
export default class Address extends React.Component {
// Props and other handlers
render() {
const { isPostal, labels } = this.state;
const compTitle = isPostal ? labels.PostalAddressLabel : labels.StreetAddressLabel;
return (
<div className="block">
<div className="grid-x">
<div className="input-field cell">
<label
dangerouslySetInnerHTML={{ __html: compTitle }}
/>
// Other elements
)
}
}
use this keyword this.componentTitle()