ReactJS: Render html from imported data string inside .map

Question

New to ReactJS. I'm mapping over an array of data, some of which are strings with HTML tags. I'm trying to figure out how to render the html so that it's functional HTML. Currently it's outputted as a string in the browser.

Data:

const PROJECTS = [
  {
    id: 1,
    title: 'Website',
    dates: 'December 2015 - December 2017',
    description: 'Did some freelance work for <a href="www.website.com">website.com</a>.',
  },
  {
    id: 2,
    title: 'Website',
    dates: 'December 2015 - December 2017',
    description: 'Did some freelance work for <a href="www.website.com">website.com</a>.',
  }
];

export default PROJECTS;

React Component

import React, { Component } from 'react';
import PROJECTS from '../data/projects';

class Projects extends Component {
  render() {
    return (
      
          <div>
            {PROJECTS.map(PROJECT => {
              return(
                <article key={PROJECT.id}>
                  <h2>{PROJECT.title}</h2>
                  <p>{PROJECT.dates}</p>
                  <p>{PROJECT.description}</p>
                </article>
              )
            })}
          </div>

    )
  }
}

export default Projects;

I guess you are looking for reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml — Berk Kurkcuoglu
– Berk Kurkcuoglu, Commented Sep 10, 2020 at 17:07

CertainPerformance · Accepted Answer · 2020-09-10 17:08:24Z

2

Change your Projects so that the HTML is composed of JSX instead:

import React from 'react';
const PROJECTS = [
  {
    id: 1,
    title: 'Website',
    dates: 'December 2015 - December 2017',
    description: <>Did some freelance work for <a href="www.website.com">website.com</a>.</>,
  },
  {
    id: 2,
    title: 'Website',
    dates: 'December 2015 - December 2017',
    description: <>Did some freelance work for <a href="www.website.com">website.com</a>.</>,
  }
];

Them, <p>{PROJECT.description}</p> - which you already have - will render the JSX.

(You do need to import React, even though you're not creating a component - since this requires JSX, and JSX requires React.createElement, a React import is required)

answered Sep 10, 2020 at 17:08

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

geraddavis Over a year ago

Thanks for the quick help. These were all great answers, however I chose yours as I have control over this particular data file.

Viet Dinh · Accepted Answer · 2020-09-10 17:09:14Z

2

There is a prop for visible html tag: dangerouslySetInnerHTML

Example:

const PROJECTS = [
    {
        id: 1,
        title: 'Website',
        dates: 'December 2015 - December 2017',
        description: 'Did some freelance work for <a href="www.website.com">website.com</a>.'
    },
    {
        id: 2,
        title: 'Website',
        dates: 'December 20' +
            '15 - December 2017',
        description: 'Did some freelance work for <a href="www.website.com">website.com</a>.'
    }
];


class Projects extends Component {
    render() {
        return (

            <div>
                {PROJECTS.map(PROJECT => {
                    return(
                        <article key={PROJECT.id}>
                            <h2>{PROJECT.title}</h2>
                            <p>{PROJECT.dates}</p>
                            <p dangerouslySetInnerHTML={{ __html:PROJECT.description}}></p>
                        </article>
                    )
                })}
            </div>

        )
    }
}

answered Sep 10, 2020 at 17:09

Viet Dinh

2,0261 gold badge10 silver badges21 bronze badges

1 Comment

geraddavis Over a year ago

Thank you for showing me how to use dangerouslySetInnerHTML. I've read about this before, but I often stumble over the correct implementation.

dev · Accepted Answer · 2020-09-10 17:17:38Z

An option is using the react-html-parser library https://www.npmjs.com/package/react-html-parser which will avoid dangerouslySetInnerHTML. It also means you wouldn't need to manipulate your array if it was coming directly from an API, for example (but it's always good practice to sanitize it anyways).

The updated code would look like:

import React, { Component } from 'react';
import PROJECTS from '../data/projects';
import ReactHtmlParser from 'react-html-parser';

class Projects extends Component {
  render() {
    return (
      
          <div>
            {PROJECTS.map(PROJECT => {
              return(
                <article key={PROJECT.id}>
                  <h2>{PROJECT.title}</h2>
                  <p>{PROJECT.dates}</p>
                  <p>{ReactHtmlParser(PROJECT.description)}</p>
                </article>
              )
            })}
          </div>

    )
  }
}

export default Projects;

Taimoor Imran · Accepted Answer · 2020-09-10 17:11:53Z

1

Without using any third party library use `dangerouslySetInnerHTML` but you have to be sure you get valid html in the response everytime

return (
    <div>
        {PROJECTS.map(PROJECT => {
            return (
                <article key={PROJECT.id}>
                    <h2>{PROJECT.title}</h2>
                    <p>{PROJECT.dates}</p>
                    <p dangerouslySetInnerHTML={{ __html: PROJECT.description }}></p>
                </article>
            )
        })}
    </div>
)

answered Sep 10, 2020 at 17:11

Taimoor Imran

431 silver badge6 bronze badges

1 Comment

geraddavis Over a year ago

Thank you for showing me how to use dangerouslySetInnerHTML. I've read about this before, but I often stumble over the correct implementation.

Collectives™ on Stack Overflow

ReactJS: Render html from imported data string inside .map

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related