How to display the twitter timeline, and not a link to the timeline, on a React App?

Question

I am trying to display the twitter timeline in my React app. It ends up displaying a link which takes me to the twitter feed but I want the timeline on this page. Do I need to install anything other twitter widgets to support it?

class App extends Component {
    render() {
        return (
            <div>
                <div className="App">
                    <header className="App-header">
                        <img src={logo} className="App-logo" alt="logo"/>
                        <h1 className="App-title">Welcome to React</h1>
                    </header>
                    <p className="App-intro">
                        To get started, edit <code>src/App.js</code> and save to reload.
                    </p>
                </div>
                <div className="Twitter-list">
                    <a class="twitter-timeline" data-width="1000" data-height="500"
                       href="https://twitter.com/life_antiguru?ref_src=twsrc%5Etfw">Tweets by life_antiguru</a>
                    <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
                </div>
            </div>
        );
    }
}

export default App;

It would better to fix your code style for readability – Heartbit Jan 06 '18 at 08:37 — Heartbit, Jan 06 '18 at 08:37

score 2 · Accepted Answer · answered Jan 06 '18 at 09:30

If you're working with react, you should better work with a package like https://www.npmjs.com/package/react-twitter-widgets (first result on a simple search) or something like that.

In general you shouldn't insert HTML directly into your elements, because this allows your users to a cross-site-scripting (XSS) attack.

See also another Question: React convert to Html

How to display the twitter timeline, and not a link to the timeline, on a React App?

1 Answers1