How to insert a html element in and convert string to HTML element?

Question

I have an array of objects with name property that has a string with h1 element tag. When I tried to bind data to a table td it shows as plain text instead of html.

Example reproduced here: https://stackblitz.com/edit/react-table-example-2rcaug?file=index.js

class App extends React.Component {
  constructor() {
this.state = {
  data:
  [
    {
      "id": 1,
      "name": "<h1>Foo</h1>",
      "age": "20"
    },
    {
      "id": 2,
      "name": "<h1>Bar</h1>",
      "age": "30"
    },
    {
      "id": 3,
      "name": "<h1>test</h1>",
      "age": "40"
    }
  ]
}
}
componentDidMount(){
 let test = [...this.state.data]
test.map((col, i) => {
      var wrapper = document.createElement("div");
      wrapper = col.name;
      test[i].name = wrapper
      console.log(wrapper)
    });

    this.setState({data : test})
}
render() {


return (
  <div>
    <Header />
    <table>
      <tbody>
        {this.state.data.map((person, i) => <TableRow key={i} data={person} 
/>)}
      </tbody>
    </table>
  </div>
);
} 
}


class Header extends React.Component {
render() {
return (
  <div>
    <h1>Header</h1>
  </div>
);
}
}

class TableRow extends React.Component {
render() {
return (
  <tr>
    <td>{this.props.data.id}</td>
    <td>{this.props.data.name}</td>
    <td>{this.props.data.age}</td>
  </tr>
);
}
}`

score 0 · Accepted Answer · answered Jan 05 '19 at 06:14

you have two options 1. remove h1 from data name

this.state = {
  data:
  [
    {
      "id": 1,
      "name": "Foo",
      "age": "20"
    },
    {
      "id": 2,
      "name": "Bar",
      "age": "30"
    },
    {
      "id": 3,
      "name": "test",
      "age": "40"
    }
  ]
}
}

class TableRow extends React.Component {
  render() {
     return (
       <tr>
         <td>{this.props.data.id}</td>
         <td><h1>{this.props.data.name}</h1></td>
         <td>{this.props.data.age}</td>
       </tr>
     );
  }
}`

use dangerouslySetInnerHTML

class TableRow extends React.Component { render() { return ( <tr> <td>{this.props.data.id}</td> <td dangerouslySetInnerHTML = {this.props.data.name} /> <td>{this.props.data.age}</td> </tr> ); } }

Just keep in mind that using dangerouslySetInnerHTML will slow down your site, being a source of slowness when mounting and rendering, you can read about it halfway through this article: https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3 — Andrei Voicu, Jan 05 '19 at 10:01

Praveen Rao Chavan.G · Answer 2 · 2019-01-05T06:43:18.740

You Can do this using dangerouslySetInnerHTML , Please check this out

dangerouslySetInnerHTML

But, I don't recommend creating DOM this way, instead, let your state hold only values like below, and let the tag be inside TableRow Component

this.state = {
      data:
      [
        {
          "id": 1,
          "name": "Foo",
          "age": "20"
        },
        {
          "id": 2,
          "name": "Bar",
          "age": "30"
        },
        {
          "id": 3,
          "name": "test",
          "age": "40"
        }
      ]
    }
  }

TableRow Component :

class TableRow extends React.Component {
  render() {
    return (
      <tr>
        <td>{this.props.data.id}</td>
        <td><h1>{this.props.data.name}</h1></td>
        <td>{this.props.data.age}</td>
      </tr>
    );
  }
}

How to insert a html element in and convert string to HTML element?

2 Answers2