HTML inside material ui Accordion

Question

I'm trying to render HTML content inside an Accordion.

import {Accordion, AccordionDetails, AccordionSummary, Typography} from '@material-ui/core';
import { Badge } from 'reactstrap';

...

const buildAccordion = (f, i) => {
    return (
        <Accordion expanded={expanded === `panel${i}`} onChange={handleChange(`panel${i}`)}>
            <AccordionSummary aria-controls={`panel${i}d-content`} id={`panel${i}d-header`}>
            <Typography>{f.Question}</Typography>
            </AccordionSummary>
            <AccordionDetails>
            <Typography>
                <Badge color="primary">Answer</Badge>
                <p>
                    {f.Answer}
                </p>
            </Typography>
            </AccordionDetails>
        </Accordion>
    );
}

However, when I render, my f.Answer shows: Steps to log in and create your account: <br><br> 1. Go to <a href="https://mysite/" target="_blank">https://mysite/</a> to access the login page <br>

Why are the html tags showing as strings?

Answer 1

f.title is a string containing HTML elements if you want to render it as a real HTML element just

change :

<p>
   {f.Answer}
</p>

to :

  <p  dangerouslySetInnerHTML={{__html: f.Answer}} />