How to use innerHTML for Accordion (PrimeReact)?

Question

In my React project, I am using the PrimeReact library to display some Accordions. But I need to create them dynamically and this is the current result:

As you see, the html tags are also shown in the answers of the faqs. I tried using innerHTML and dangerouslySet... but to no success.

Here is my relevant code:

createAccordions = () => {
    const allFAQs = this.state.allFAQs;
    let accordions = [];

    for (const faq of allFAQs) {
        const accordion = <AccordionTab header={faq.question} dangerouslySetInnerHTML={{__html: `<p>yo man</p>`}}></AccordionTab>;
        accordions.push(accordion);
    }

    return accordions
}

render() {
    return (
        <div className="component">
            <h1 style={{textAlign: 'center'}}>{this.state.pageTitle}</h1>

            <div className="p-grid">
                
                <div className="p-col-3">

                </div>

                <div className="p-col-6">
                    <Accordion>
                        {this.createAccordions()}
                    </Accordion>
                </div>


                <div className="p-col-3">
                    
                </div>
            </div>
        </div>
    )
}

How can I properly set the innerhtml for the accordions?

Does this answer your question? [ReactJS convert HTML string to JSX](https://stackoverflow.com/questions/19266197/reactjs-convert-html-string-to-jsx) — GrafiCode, Aug 19 '21 at 12:45
@GrafiCode Sadly not in this case. The dangerouslySetInnerHTML didnt work for me in this case. — IonicMan, Aug 19 '21 at 12:48

score 3 · Accepted Answer · answered Aug 19 '21 at 12:53

I took a look at the source and found that the library tries to render the children you pass to it. I see you tried dangerouslySetInnerHTML, but set it on the AccordionTab itself instead of the child passed into it.

I set up a quick demo on CodePen. I passed in a div container to set the innerHTML on, and it seems to work!

<AccordionTab header="Demo">
  <div dangerouslySetInnerHTML={{ __html: "<ul><li>I am HTML</li></ul>" }}></div>
</AccordionTab>

How to use innerHTML for Accordion (PrimeReact)?

1 Answers1