dangerouslySetInnerHTML showing object on mapped data

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.

Still shows `[object Object],[object Object],[object Object]` — Adewale Perfect, Feb 12 '21 at 17:46

juliomalves · Answer 1 · 2021-02-12T18:32:45.327

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)
            }} />
        </>
    );
}

edited Feb 12 '21 at 18:32

answered Feb 12 '21 at 18:12

juliomalves

42,130
20
150
146

It tried this. And I got something like this:
`
Test here
` I actually want it not to show the HTML tags but execute all – Adewale Perfect Feb 12 '21 at 18:26
Both returns the same output. `
Test here
` – Adewale Perfect Feb 12 '21 at 18:32
Are you converting the JSX inside the array to a string by any chance? Or is you code exactly the same as my examples? You're not using `ExtendedProfileShow.join('')`, are you? – juliomalves Feb 12 '21 at 18:33
Yes, the same as your example. I didn't change any – Adewale Perfect Feb 12 '21 at 18:39
Still the same, sir. – Adewale Perfect Feb 12 '21 at 18:59
My guess is that those HTML tags come as string somehow, so it's rendering them as such. Is the full JSX in the array being rendered as a string, or only part of it? If you could provide a reproducible example (with the data you are using) that would be helpful – juliomalves Feb 12 '21 at 19:05

dangerouslySetInnerHTML showing object on mapped data

1 Answers1

Test here

Test here