How render a string as HTML in React

Question

I'm calling an API in ReactJS using axios. The call is successful but the output looks like the following:

Bitcoin has inspired other alternative currencies such as 
<a href="https://www.coingecko.com/en/coins/litecoin">Litecoin</a>, 
<a href="https://www.coingecko.com/en/coins/peercoin">Peercoin</a>

How can I render it as HTML and not as a string ?. Here is my code

import React from 'react';
import axios from 'axios';

class API extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            data: []
        }
    }

    componentDidMount() {

        axios.get('https://api.coingecko.com/api/v3/coins/bitcoin?localization=false')
            .then(res => {
                const data = res.data;
                console.log(res.data);
                this.setState({ data, loading: false })
            })
    }

    render() {
        return (
           <div>
            {this.state.loading ? <p>Loading..</p> : 
              <p>{this.state.data.description.en}</p>
            }
          </div>
        );
    }
}

export default API;

@MosèRaguzzini: OP has posted the code what is tried so far? — huMpty duMpty
– huMpty duMpty, Commented Aug 7, 2019 at 13:58
@huMptyduMpty there is no method that try to parse the response. So the OP has not tried to solve it — Mosè Raguzzini
– Mosè Raguzzini, Commented Aug 7, 2019 at 14:00
There is no attempt in the code to solve the issue of removing <a /> and render the result. — Mosè Raguzzini
– Mosè Raguzzini, Commented Aug 7, 2019 at 14:04

ravibagul91 · Accepted Answer · 2019-08-07 14:08:20Z

2

See dangerouslySetInnerHTML

 render() {
        return (
           <div>
            {this.state.loading ? <p>Loading..</p> : 
              <div dangerouslySetInnerHTML={{__html:this.state.data.description.en}}></div>
            }
          </div>
        );
    }

edited Aug 7, 2019 at 14:08

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

answered Aug 7, 2019 at 14:00

huMpty duMpty

14.5k14 gold badges64 silver badges102 bronze badges

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

4 Comments

Mosè Raguzzini Over a year ago

OP asked: 'How can I replace the a href tags that are rendered with just "Litecoin" and "Peercoin".'

huMpty duMpty Over a year ago

of course, when you render the <a href="https://www.coingecko.com/en/coins/litecoin">Litecoin</a> as html it becomes Litecoin. You can post an answer or leave it to the OP to comment on it

Mosè Raguzzini Over a year ago

Ok, maybe the OP refers to the rendered HTML, instead of raw output

ShaneOG97 Over a year ago

This solution answers the problem perfectly. Thanks humpty dumpty :D

Vaibhav Vishal · Accepted Answer · 2019-08-07 14:02:40Z

2

You can use dangerouslySetInnerHTML, but as the name suggests, it's dangerous. See the snippet for demo code.

const root = document.getElementById("root");
const App = () => {
  const APIData = `Bitcoin has inspired other alternative currencies such as 
<a href="https://www.coingecko.com/en/coins/litecoin">Litecoin</a>, 
<a href="https://www.coingecko.com/en/coins/peercoin">Peercoin</a>`;

  return (
    <div>
      <div dangerouslySetInnerHTML={{__html: APIData }} />
    </div>
  );
};
ReactDOM.render(<App />, root);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></root>

answered Aug 7, 2019 at 14:02

Vaibhav Vishal

7,2487 gold badges32 silver badges51 bronze badges

2 Comments

Mosè Raguzzini Over a year ago

OP asked: 'How can I replace the a href tags that are rendered with just "Litecoin" and "Peercoin".'

Mosè Raguzzini Over a year ago

I misunderstood the requirement, as replace the a href tags that are rendered with just "Litecoin" and "Peercoin", in my glossary means remove a href tag before render. You can well form a question and set it with wrong tags too.

Collectives™ on Stack Overflow

How render a string as HTML in React

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related