CODEWITHSUNDEEP
datagridreactjs
arkoak
arkoak

Reputation: 2497

reactjs datagrid use html

Im using the datagrid component here

I would like to use html in one of the fields and show a link or a picture etc. I tried using the render function for the column as below

var columns = [
    { name = 'field' },
    { name = 'link',render : function(uri) { return '<a href="'+uri+'">link</a>'} },
];

however it prints out the html as text

Upvotes: 1

Views: 1189

Answers (2)

arkoak
arkoak

Reputation: 2497

First I created a class which will output a link

var Linkify = React.createClass({
    render : function(){
        return (
             <a href={this.props.link}>{this.props.title}</a>
       )
   },
});

Then used this class in the render function 

 var columns = [
{ name : 'edit', render : function(id){
        var editlink = "http://www.example.com/id="+id;
        return ( <Linkify link={editlink} title="edit" />)
    }  
},

This way any html can be used in the datagrid column by simply using the react component.

Upvotes: 1

gcedo
gcedo

Reputation: 4931

This is because by default React escapes HTML, in order to prevent XSS attacks. You can by pass this, by using the prop dangerouslySetInnerHTML, as described here.

However, as the name suggests, this leads to a vulnerability. I would suggest instead to use Mardown, especially the marked package.

You can write a general component like this one and then use it everywhere.

import React from 'react';
import marked from 'marked';

const Markdown = React.createClass({
    render() {
        const raw = marked(this.props.text, {sanitize: true});
        return  <span dangerouslySetInnerHTML={{__html: rawMarkup}} />;
    }

});

In your case then

var columns = [
    { name = 'field' },
    { name = 'link', render : function(uri) { return <Markdown text={'[link](' + uri + ')'} />} },
];

Upvotes: 1

Related Questions