React: how to set `dangerouslySetInnerHTML` from component's state?

Question

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?

The component is a class, so you need to use `this`, i.e. `this.componentTitle()`. Also `let/const` are block scoped, so in your last attempt you can't define them inside the `if/else` statement block, then use them outside it. Have a read on the difference between `var` and `let/const` — Jayce444, Mar 24 '22 at 04:43
Not sure why you are using `dangerouslySetInnerHTML`. You can directly add like this `{this.state.isPostal ? this.state.labels.PostalAddressLabel : this.state.labels.StreetAddressLabel}` — Suresh Ponnukalai, Mar 24 '22 at 04:49
Does this answer your question? [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Emile Bergeron, Mar 24 '22 at 04:54

score 2 · Answer 1 · answered Mar 24 '22 at 04:48

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>

score 2 · Answer 2 · answered Mar 24 '22 at 04:50

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
        )
    }
}

score 2 · Accepted Answer · answered Mar 24 '22 at 04:52

2

use this keyword this.componentTitle()

answered Mar 24 '22 at 04:52

Balagoni Harish

106
1
8

React: how to set `dangerouslySetInnerHTML` from component's state?

3 Answers3