CODEWITHSUNDEEP
javascripthtmlreactjsecmascript-6antd
Glory Raj
Glory Raj

Reputation: 17701

looking for render function will take HTML and apply styles to the string with react js

I have an antd table where i am trying to convert the result field value that will include html attributes string into the respective styles for one of the column and i have failed with that conversion

below is my string where i am looking into convert

The exhaust air requirements for fume hoods will be based on maintaining a face velocity of <b>[100] [80] [60]</b> fpm through the open sash with the sash <b>[100% open] [50% open] [positioned at 18" above work surface]</b>

i am looking for the below kind of string

The exhaust air requirements for fume hoods will be based on maintaining a face velocity of [100] [80] [60] fpm through the open sash with the sash [100% open] [50% open] [positioned at 18" above work surface]

but in the table it is looking like in below image

enter image description here

I am looking for render function that will take those html tags and render the string like as above but could not be able to get that.

Could any one please suggest or any help on this issue that would be very grateful to me, many thanks in advance

I am using react JS with ANTD library and below is the column configuration for table

{
  title: 'Narrative Description',
  name: 'exhaustEquipmentNarrativeHTML',
  table: {
    sortable: SORTABLE.ALPHA,
    searchable: true,
    width: '20%'
    render: text => {
      return ''; // this is where i am stuck in 
    }
  },
  drawer: {
    component: JoditAdapter,
    isReadOnly: false
  }
},

Upvotes: 1

Views: 118

Answers (1)

J&#243;zef Podlecki
J&#243;zef Podlecki

Reputation: 11305

According to docs render can return ReactNode

And it looks like you want to use dangerouslySetInnerHTML

render: text => {
      return <span dangerouslySetInnerHTML={{__html: text}}></span>
    }

Upvotes: 2

Related Questions