How to return HTML into component without using <div> tag

[ppowell777]

I have a page that uses CSS, namely Bootstrap, for design and styling, and extra <DIV> tags can affect the page's look-and-feel, so I want to return HTML from a React function inside a component without having to use a <div> tag:

import React from 'react';
import DOMPurify from 'dompurify';
import { headerTabArray } from './constants/header_constants';
import { useGetData } from './functions/use_get_data';
import headerPng from './images/header.png';

const Header = () => {

    const generateHeaderTabs = () => {
        let html = '';
        if (typeof headerTabArray !== 'undefined' && headerTabArray != null && headerTabArray.length > 0) {
            html += `<ul>\n`;
            for (let i = 0; i < headerTabArray.length; i++) {
                html += `<li>\n\t
                            <a href="${headerTabArray[i].url}">${headerTabArray[i].text}</a>\n
                        </li>\n`;
            }

            html += `</ul>\n`;
        }

        return DOMPurify.sanitize(html);
    }

    return (
        <header id="header" className="usa-header">
            <div>{/* useGetData({url: myUrl}) */}</div>
        
            <div className="top-bar hidden-sm hidden-xs">
               <div dangerouslySetInnerHTML={{__html: generateHeaderTabs()}} />
            </div>
            <div className="clearfix"></div>
        </header>
    );
};

export default Header;

How else can I write this without having to use the extra <DIV> tag (the one with "dangerouslySetInnerHTML")?

Thanks

 

[Johna]

Hey there,

You could try using the dangerouslySetInnerHTML attribute directly on the parent div element. So something like this:

/* some code here */
    return (
        <header id="header" className="usa-header">
            <div>{/* useGetData({url: myUrl}) */}</div>
        
            <div
                className="top-bar hidden-sm hidden-xs"
                dangerouslySetInnerHTML={{__html: generateHeaderTabs()}}
            />
            <div className="clearfix"></div>
        </header>
    );
/* some more code here */

 

[ppowell777]

Hey there,

You could try using the dangerouslySetInnerHTML attribute directly on the parent div element. So something like this:

/* some code here */
    return (
        <header id="header" className="usa-header">
            <div>{/* useGetData({url: myUrl}) */}</div>
       
            <div
                className="top-bar hidden-sm hidden-xs"
                dangerouslySetInnerHTML={{__html: generateHeaderTabs()}}
            />
            <div className="clearfix"></div>
        </header>
    );
/* some more code here */

Aw man, I am so embarrassed! The solution was right in front of me, and I continued to miss it until now! Thank you!