reactjs datagrid use html

Question

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

gcedo · Accepted Answer · 2015-06-08 09:53:04Z

1

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 + ')'} />} },
];

edited Jun 8, 2015 at 9:53

answered Jun 8, 2015 at 7:48

gcedo

4,9611 gold badge23 silver badges28 bronze badges

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

3 Comments

arkoak Over a year ago

Yes I know this however can you point out how exactly I can achieve this without modifying the datagrid code. Note that the data grid takes column parameters only in specific format.

arkoak Over a year ago

Before you answered this, I came up with a simpler solution that does not involve using markdown and provides more flexibility, I just created a new reactClass , named it Linkify and the render function returned : return ( <Linkify link={link} title={title} />) . But thanks for the help

gcedo Over a year ago

Of course, I went for Markdown because you said that you wanted to include > link, images, etc. therefore I thought you were looking for a way to insert HTML in general.

arkoak · Accepted Answer · 2015-06-08 10:23:25Z

1

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.

answered Jun 8, 2015 at 10:23

arkoak

2,4951 gold badge21 silver badges39 bronze badges

Collectives™ on Stack Overflow

reactjs datagrid use html

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related