Inserting html inside string variable used in React component

Question

I have a react app I am building for my portfolio site. Currently i have the app written in JSX so i can add stuff like:

class Project extends React.Component {
render() {
    return (
        <div className={this.props.project.class}>
            <h1>{this.props.project.header}</h1>
            <div>
                <div className='description'>
                    <p>{this.props.project.description}</p>
                    <p>The Tech Stack</p>
                    <ul>
                        {
                        this.props.project.items.map(function(listValue){
                            return <li>{listValue}</li>;
                        })}
                    </ul>
                </div>
                <div className='image'>

                </div>
            </div>

        </div>
    );
}

}

to my component. I am currently managing my long strings of text in a different file called Text.js:

export let exampleText = "Graded is a application developed by <a href='google.com'> Link here. </a> and myself for our second year user interfaces course.";

And access it in my jsx file here:

var gradedItems = {
    class: "gradedSection content",
    header: "Graded",
    description: Text.exampleText,
    items : ["Java", "Android"]
}

and then it gets displayed in the <p> tags in the above component. However as I mentioned the link doesn't actually render and the html tags don't get rendered. So it looks like some text and then a tag in the website.

How should I go about adding these html tags within this string so when the component renders it, the html elements inside get rendered out?

Is it even possible in this situation, is there a better way of doing what I'm trying to achieve?

Thanks as always SO!

There's also a package to avoid dangerouslySet, github.com/utatti/react-render-html, and there are a few others that do the same thing. — Dave Newton
– Dave Newton, Commented Jan 3, 2018 at 19:54

Sergii Rudenko · Accepted Answer · 2018-01-03 22:22:51Z

6

You just need to use dangerouslySetInnerHTML and it will help.

Example usage:

let exampleText = "Graded is a application developed by <a href='google.com'> Link here. </a> and myself for our second year user interfaces course.";
function Component() {
  return <div dangerouslySetInnerHTML={{__html: exampleText }} />;
}

edited Jan 3, 2018 at 22:22

answered Jan 3, 2018 at 19:49

Sergii Rudenko

2,6841 gold badge24 silver badges25 bronze badges

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

Comments

Ted · Accepted Answer · 2018-01-03 21:41:11Z

5

An option is to change the strings in Text.js to html bits, like

export const exampleText = (
  <span>
    Graded is a application developed by 
    <a href='google.com'> Link here. </a>
    and myself for our second year user interfaces course.
  </span>
);

answered Jan 3, 2018 at 21:41

Ted

14.9k2 gold badges43 silver badges58 bronze badges

Comments

Fahd Jamy · Accepted Answer · 2019-10-23 14:50:29Z

4

first you npm install html-react-parser

import Parser from 'html-react-parser';

var exampleText = 'Graded is a application developed by <a href='google.com'>     Link here. </a> and myself for our second year user interfaces course.';


render: function() {
    return (
        <div>{Parser(exampleText)}</div>
    );
}

answered Oct 23, 2019 at 14:50

Fahd Jamy

4107 silver badges8 bronze badges

Collectives™ on Stack Overflow

Inserting html inside string variable used in React component

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related