RSS doesn't render in React component

Question

I am trying to display a RSS widget on my website and I am trying to render it from my React component. But it doesn't show up. When I tried to add it to my HTML file, at the bottom of it works perfect.

How should I go about adding script tags to React?

This is my component:

import React, { Component } from 'react';

class Blog extends Component {
    render() {
        return (
            <div className="container">
                <h1 className="page-header">Blog</h1>
                <script type="text/javascript" src="https://feed.mikle.com/js/fw-loader.js" data-fw-param="52132/"></script>
            </div>
        );
    }
}

export default Blog;

Answer 1

You might try loading the <script> outside of your render method and moving it into a lifecycle method instead - that is, unless you want the script to load every time the render method gets called. Try something like this:

componentWillMount() {

    const script = document.createElement("script");

    script.src = "https://use.typekit.net/foobar.js";

    // you may want to load the script asynchronously so that is is
    // only executed once available
    script.async = true;

    document.body.appendChild(script);
}

This way, your <script> should get called just before your component mounts.