CODEWITHSUNDEEP
javascriptreactjsjsx
Fabul
Fabul

Reputation: 166

insert html tags inside the jsx object for mapping

I have a string inside an object with some HTML tags in it, and I want to print the values inside that object using map function.

const tableBody = [
  {
    date: '02/08/2019',
    item: 'Renewed your <strong>current Team Plan</strong>'
  },
  {
    date: '05/09/2019',
    item: 'Renewed your current Team Plan 2'
  },
  {
    date: '15/10/2019',
    item: 'Renewed and upgraded to the <strong> Business Plan </strong> with 3 new members'
  }
];


<table>
{tableBody.map(tableBody => (
  <tr>
   <td>{tableBody.date}</td>
   <td>{tableBody.item}</td>
  </tr>
))}
</table>

when I run this code, I want that <strong> tag inside the string compiled as an HTML element instead of rendered as plain text. So is there any way to achieve this guys?

Upvotes: 1

Views: 1430

Answers (4)

Chetan Prakash
Chetan Prakash

Reputation: 71

you need to install html react parser pacakge

npm install react-html-parser

and here is your answer :-

import ReactHtmlParser from 'react-html-parser';

const tableBody = [
  {
    date: '02/08/2019',
    item: 'Renewed your <strong>current Team Plan</strong>'
  },
  {
    date: '05/09/2019',
    item: 'Renewed your current Team Plan 2'
  },
  {
    date: '15/10/2019',
    item: 'Renewed and upgraded to the <strong> Business Plan </strong> with 3 new members'
  }
];


<table>
  <tbody>
{tableBody.map((tableBody,i) => (
  <tr key={i}>
   <td>{tableBody.date}</td>
   <td>{ReactHtmlParser(tableBody.item)}</td>
  </tr>
))}
</tbody>
</table>

Upvotes: 1

Dennis Vash
Dennis Vash

Reputation: 53874

You should render ReactElement or use dangerouslySetInnerHTML

const tableBody = [
  {
    date: '02/08/2019',
    item: (
//    v <React.Fragment>
      <>
        Renewed your <strong>current Team Plan</strong>
      </>
    )
  }
];


export default function App() {
  return (
    <FlexBox>
      <table>
//                      v Notice the shadowing in OP's code
        {tableBody.map(tableBody => (
          <tr>
            <td>{tableBody.date}</td>
//                v ReactElement
            <td>{tableBody.item}</td>
          </tr>
        ))}
      </table>

//    v `dangerouslySetInnerHTML` example
      <table>
        <tr>
          <td>{'02/08/2019'}</td>
          <td
            dangerouslySetInnerHTML={{
//                      v A string, exposed to attacks, not recommended
              __html: 'Renewed your <strong>current Team Plan</strong>'
            }}
          />
        </tr>
      </table>
    </FlexBox>
  );
}

Playground:

Edit Q-57955460-ReactElementRender

Upvotes: 2

Mihai T
Mihai T

Reputation: 17687

You could use dangerouslySetInnerHTML but that's not a good practice. You can look up methods to sanitize you HTML before inserting it with dangerouslySetInnerHTML or you could change your json structure ( if that's possible and/or feasible )

Split your item into another object like: 

item : { 
   first: ' some text ', 
   second: 'the strong text', 
   third :' the other text' 
}

And then in JSX

<td>{tableBody.item.first} <strong>{tableBody.item.second}</strong> {tableBody.item.third}</td>

Upvotes: 0

P-A
P-A

Reputation: 1278

First you should not name the variable you are accessing in the map func the same as the variable your are running map on so

    {tableBody.map(tableBody => (
  <tr>
   <td>{tableBody.date}</td>
   <td>{tableBody.item}</td>
  </tr>
))}

Should be something like

{tableBody.map(tableItem => (
  <tr>
   <td>{tableItem.date}</td>
   <td>{tableItem.item}</td>
  </tr>
))}

Upvotes: -1

Related Questions