Adding script tag to React/JSX

Question

I have a relatively straightforward issue of trying to add inline scripting to a React component. What I have so far:

\'use strict\';

import \'../../styles/         


        

Answer 1

This answer explains the why behind this behavior.

Any approach to render the script tag doesn't work as expected:

1. Using the script tag for external scripts
2. Using dangerouslySetInnerHTML

Why

React DOM (the renderer for react on web) uses createElement calls to render JSX into DOM elements.

createElement uses the innerHTML DOM API to finally add these to the DOM (see code in React source). innerHTML does not execute script tag added as a security consideration. And this is the reason why in turn rendering script tags in React doesn't work as expected.

For how to use script tags in React check some other answers on this page.