dangerouslySetInnerHTML 在映射数据上显示 object

Question

I tried getting some values from an GraphQL data. Then, I want to display it via
<div dangerouslySetInnerHTML={{ __html: ExtendedProfileShow }} />

Then, I got [object Object],[object Object],[object Object] .

Here are my codes:

The error File:

export default function Profile({ profileData }) {
    const ExtendedProfileShow = [
        profileData.businessInfo.extendedProfile.map((showExtendedProfile) => (
            <div key={showExtendedProfile.title}>
                {showExtendedProfile.title} <br/> {showExtendedProfile.info}    
            </div>
        ))
    ]

    return (
        <> 
          <div dangerouslySetInnerHTML={{ __html: ExtendedProfileShow }} />
        </>
    );
}

My api.js:

export async function getAllBusinessProfiles() {
    const data = await fetchAPI(
      `
      query AllProfiles {
        businessProfiles(where: {orderby: {field: DATE, order: ASC}}) {
          edges {
            node {
              date
              title
              slug
              link
              uri
              businessInfo {
                name
                title
                company
                image {
                  mediaItemUrl
                  altText
                }
                highlight
                phone
                city
                country
                facebook
                linkedin
                instagram
                email
                website
                profiles {
                  profile
                  profileInfo
                }
                extendedProfile {
                  title
                  info
                }
              }
            }
          }
        }
      }
      
      `
    );
    return data?.businessProfiles;
};

The data has HTML elements like - <p> Test test </p> And it's expected to execute the tags also.

What could be error here? Thanks.

Answer 1

In this case there's no need to even use dangerouslySetInnerHTML . You can simply pass the JSX you generate directly.

export default function Profile({ profileData }) {
    const ExtendedProfileShow = [
        profileData.businessInfo.extendedProfile.map((showExtendedProfile) => (
            <div key={showExtendedProfile.title}>
                {showExtendedProfile.title} <br/> {showExtendedProfile.info}    
            </div>
        ))
    ]

    return (
        <> 
            <div>{ExtendedProfileShow}</div>
        </>
    );
}

However, if for some reason you really wanted to use dangerouslySetInnerHTML , you could use ReactDOMServer.renderToStaticMarkup to convert your JSX to a string.

import ReactDOMServer from 'react-dom/server'

export default function Profile({ profileData }) {
    const ExtendedProfileShow = [
        profileData.businessInfo.extendedProfile.map((showExtendedProfile) => (
            <div key={showExtendedProfile.title}>
                {showExtendedProfile.title} <br/> {showExtendedProfile.info}    
            </div>
        ))
    ]

    return (
        <> 
            <div dangerouslySetInnerHTML={{
                __html: ReactDOMServer.renderToStaticMarkup(ExtendedProfileShow)
            }} />
        </>
    );
}