如何将 innerHTML 用于 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?

Answer 1

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>