render string as html in cell of react-table

Question

I'm using typescript. I'm having a column value in the table as

val desc = "<div><p>testing</p></div>"

I want to render this as testing in value. I'm using

react-table

I tried new DOMParser().parseFromString("<div><p>testing</p></div>", "text/html") But got error as

Error: Objects are not valid as a React child (found: [object HTMLDocument]). If you meant to render a collection of children, use an array instead

Here is my react-table code:

<Table
        data={data}
        headers={headers}
        searchable={true}
        searchPlaceholder={'Search Apps'}
        toolBarButtons={toolBarButtons}
      />



const headers = useMemo(
    () => [
      {
        Header: <LeftHeader>{checkbox}</LeftHeader>,
        accessor: 'Checkbox',
        disableSortBy: true,
      },
      {
        Header: <LeftHeader>Name {sortIcon}</LeftHeader>,
        accessor: 'Name',
      },
      {
        Header: <LeftHeader>Type {sortIcon}</LeftHeader>,
        accessor: 'Type',
      },
      {
        Header: <LeftHeader>Tenancy {sortIcon}</LeftHeader>,
        accessor: 'Tenancy',
      },
      {
        Header: <LeftHeader>Description {sortIcon}</LeftHeader>,
        accessor: 'Description',
      },
      {
        Header: <LeftHeader>Action</LeftHeader>,
        accessor: 'Button',
        disableSortBy: true,
      },
    ],
    [],
  )

    const data = useMemo(() => {
    return List.map((ap) => {
      const actionButton = (
        <Edit
          size={20}
          cursor={'pointer'}
          color={'#1E95DE'}
          onClick={() => setRedirectUrl(RouteConstants.Marketplace + '/' + ap.id)}
        />
      )
      checkbox = <input type={'checkbox'} onChange={(e) => handleInputChange(e, ap)} />;
      return {
        Checkbox: checkbox,
        Name: ap.stuName,
        Type: options.filter(e => e.value === ap.stuType).map(f => {
          return f.label
        }),
        Description: ap.studescription,
        Tenancy: titleCase(ap.stuTenancy),
        Button: actionButton,
      };
    })
  }, [List])

How can I achieve this?

Is there a reason why desc is defined as "<div><p>testing</p></div>" (string) and not as <div><p>testing</p></div> (React element)? If not, just remove the quotes and you should be fine. — 3limin4t0r
– 3limin4t0r, Commented Feb 28, 2021 at 11:06
yeah, there is a reason. It will be not just this much its like a description of any application — Harshit Thakurr
– Harshit Thakurr, Commented Feb 28, 2021 at 11:16

Ajeet Shah · Accepted Answer · 2021-03-09 10:10:11Z

3

You will have to use dangerouslySetInnerHTML which is unsafe, prone to XSS attack.

let desc = "<div><p>testing</p></div>"
// ...
<span dangerouslySetInnerHTML={{__html: desc}} />

// or in React Table Cell
{
  Header: <LeftHeader>Description {sortIcon}</LeftHeader>,
  accessor: 'Description',
  Cell: ({row}) => <span dangerouslySetInnerHTML={{__html: row.original.Description}} />
},

You can do it if you trust the source of your HTML string. It should not be a user provided input.

edited Mar 9, 2021 at 10:10

answered Feb 28, 2021 at 10:46

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

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

2 Comments

Harshit Thakurr Over a year ago

I had to do this: Cell: function renderDescription(row: any) { return (<span dangerouslySetInnerHTML={{ __html: row.row.original.Description }} />) }

Ajeet Shah Over a year ago

@PuneetMehta Yes, right. You need to do row.row in React Table V7. I have updated my answer. You can also use ({row}).

qafoori · Accepted Answer · 2021-02-28 10:53:53Z

1

You have two another choice here.

One of theme is to use states. I would like to recommend you to use "redux".

For example (Using pure react states):

import React, {useState} from 'react';
export const App = props => {
   const [desc, setDesc] = useState('<div><p>testing</p></div>');
   return <element>{desc}</element>
}

And the other one is innerHTML by Ref or DOM:

import React, { useRef, useEffect } from 'react';
const desc = "<div><p>testing</p></div>";
export const App = props => {
   const myRef = useRef(null);
   useEffect(() => {
      myRef.current.innerHtml = desc; //using Refs
      //or
      document.getElementById('myID').innerHTML = desc; //using DOM
   }, [])
   return <element id="myId" ref={myRef}>{desc}</element>
}

answered Feb 28, 2021 at 10:53

qafoori

9619 silver badges14 bronze badges

1 Comment

Harshit Thakurr Over a year ago

I've updated the code. How can I use it in react-table

Collectives™ on Stack Overflow

render string as html in cell of react-table

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related