0

Just wondering what the procedure is loading an external script into a component which renders HTML?

I call a script, which returns me an unordered list which i want to use for an image carousel it looks something like this but currently isn't working

this is what i have inside my render

return(

<Slick {...settings}>

  <script
    type="text/javascript"
    src="https://some.external.script.js"
  />

  <div
    class="render-html-here-from-script"        
  />

  <script>
    SomeScript.require(['xxx'], function(arg)
    {arg.loadAll().done(function(embed) {
      // code here gets list and binds above in div
    })}
    )
  </script>

</Slick>
)

the above code works fine if I just copy/paste straight into a standard HTML page

Thanks

ace2case
  • 261
  • 2
  • 8
  • This should be helpful: https://stackoverflow.com/a/34425083/3110695 – FortyTwo Jan 15 '19 at 09:26
  • Also, you should know the difference between HTML and JSX. `class` attribute for a `div` is `className` in JSX – FortyTwo Jan 15 '19 at 09:28
  • I'd say you should use React more intimately. Try loading the script separately (or importing it), fetch your list of images, put in state, then render the list from your state. On componentDidUpdate you could bind the carousel init functions on the div that has the list. – Sunny R Gupta Jan 15 '19 at 11:01

0 Answers0