CODEWITHSUNDEEP
reactjsjavascript-objects
catandmouse
catandmouse

Reputation: 11809

How to store HTML as a value of an object property in react state?

I have this state in my FAQ component:

this.state = {
            faqs: [
                {
                    question: "Some question string",
                    answer: "Some answer string"
                },
                {
                    question: "Some question string",
                    answer: "Some answer string"
                }
            ]
        };

Which I loop over to in the render method to display each FAQ set. However, my 'answer' property needs to contain <p></p> tags as in: 

{
   question: "Some question string",
   answer: "<p>Some answer string</p> <p>Some answer string</p>"
}

How do I achieve this in react?

Upvotes: 2

Views: 10313

Answers (2)

larp
larp

Reputation: 1067

Simply wrap it with Fragments. 

{
    question: "Some question string",
    answer: <><p>Some answer string</p> <p>Some answer string</p></>
}

or with this

{
    question: "Some question string",
    answer: <React.Fragment><p>Some answer string</p> <p>Some answer string</p></React.Fragment>
}

Upvotes: 5

Dacre Denny
Dacre Denny

Reputation: 30360

If I understand your situation correctly, this may be a case for react's builtin dangerouslySetInnerHTML prop.

The dangerouslySetInnerHTML prop provides a mechanism for specifying the html contents of an element by means of a string value, rather than via JSX.

To illustrate this concept, see the following code:

// I am assuming that your render function looks something like this:
function render() {

  const faqs = this.state.faqs

  return (<div>
    faqs.map(faq => {    
      return (<div>
          <h3> {{ faq.question }}</h3>
          {/* make use of dangerouslySetInnerHTML in this way to 
              account for HTML tags/markup in the answer variable */}
          <div dangerouslySetInnerHTML={{ _html : faq.answer }}></div>
        </div>)    
    })
    </div>)
}

Upvotes: 2

Related Questions