How to add <script> tag using ReactJS?

Question

I need to declare a javascript function as described below:

render: function() {
  return (
          <div>
            <SomeReactClass somefunction="myFunction">
            <script>
              function myFunction(index, row) {
                return index;                       <<<< error in this line 
              }
            </script>
          </div>
          );
}

But, it does not compile: "Parse Error: Line 113: Unexpected token return"

How can I add tag using ReactJS?

UPDATE

I'm trying to use bootstrap-table detail view. The function is passed as parameter to the grid and it is used to render the row's detail. Also, see the example's source code for a better understanding.

When I try the way you're saying, it compiles, but does not work at all:

This is how it looks like (in example above):

enter image description here

This is what I'm getting with <SomeReactClass somefunction={myFunction}>

enter image description here

Why would you want to add a <script> element in the first place? (this should probably not throw an error, but it's an odd case anyway) — Felix Kling
– Felix Kling, Commented Jul 7, 2015 at 18:53
You may want to check this answer. https://stackoverflow.com/questions/48966464/add-raw-html-with-script-inside-gatsby-react-page It works for me. This should be a comment but I don't have enough reputation... — nliu71
– nliu71, Commented Mar 1, 2019 at 20:28

Bamieh · Accepted Answer · 2016-09-25 10:43:11Z

13

I know this is old, but i stumbled upon this recently and here is the best solution i found (i'm using it for browser polyfills, but it works for any code):

render: function() {
  return (
     <div>
        <SomeReactClass somefunction="myFunction">
        <script
          dangerouslySetInnerHTML={{ __html:
            `function myFunction(index, row) {return index;}`
          }}
        />
     </div>
  );
}

answered Sep 25, 2016 at 10:43

Bamieh

11k5 gold badges34 silver badges52 bronze badges

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

Comments

Felix Kling · Accepted Answer · 2015-07-07 19:08:37Z

12

Inside JSX, {...} denotes a JavaScript expression. return index; on its own is not a valid expression.

You have to explicitly create a string so that the {...} are not interpreted by JSX. Template literals may be the easiest solution:

<script>{`
    function myFunction(index, row) {
        return index;
    }
`}</script>

However, I have a hard time coming up with a reason why one would want to create a <script> dynamically.

What you should probably do is pass the function directly to the component:

function myFunction(index, row) {
    return index;
}

var Component = React.createElement({
  render: function() {
    return (
      <div>
        <SomeReactClass somefunction={myFunction} />
      </div>
    );
  }
});

But it's hard to tell without you explaining what you are really trying to achieve here.

edited Jul 7, 2015 at 19:08

answered Jul 7, 2015 at 19:02

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

2 Comments

Felix Kling Over a year ago

Fix SomeReactClass to expect a function, not a string.

Nick Tomlin Over a year ago

It looks like the underlying plugin expects a string attribute that corresponds to a function on the global scope github.com/wenzhixin/bootstrap-table/blob/master/src/…. So if the OP wants to use an html attribute to initialize the bootstrap component he'll need to attach it attach it to window. Otherwise he can initialize the table manually.

PhilVarg · Accepted Answer · 2015-07-07 19:44:02Z

1

i think youre just looking for interpolation of your JS

function myFunction(index, row) {
  return index;    
}
render: function() {
  return (
    <div>
      <SomeReactClass somefunction={myFunction}>
    </div>
  );
}

to interpolate javascript in jsx utilize curly braces {}
https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions

per your edit:
again, you need to be using the braces to interpolate your function. so inside of SomeReactClass you need to be doing something like this in the render function:

<div>{this.props.myFunction(index, row)}</div>

most notably, you need to not only interpolate the function, by you also need to be executing it.

edited Jul 7, 2015 at 19:44

answered Jul 7, 2015 at 19:05

PhilVarg

4,8303 gold badges22 silver badges39 bronze badges

2 Comments

Felix Kling Over a year ago

That doesn't make a lot of sense. This would try to render a function as a child of a <div>.

PhilVarg Over a year ago

updated. it would be helpful for us to see the code of your example SomeReactClass because it doesnt look like your executing it correctly. Id also suggest reading the docs to how to properly use jsx from the link i posted

Visnja · Accepted Answer · 2020-10-13 21:35:10Z

0

You should try this:

function myFunction(index, row) {
  return index;    
}

render: function() {
 return (
      <div>
        <script
            dangerouslySetInnerHTML={{ 
              __html:myFunction() 
        
            }}
        />
      </div>
      );
}

answered Oct 13, 2020 at 21:35

Visnja

1

Collectives™ on Stack Overflow

How to add <script> tag using ReactJS?

UPDATE

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related