javascript - How to insert script tag to React -


i'm trying countdown clock in react, problems script tag

      var product = this.state.productlist.map(function (product, i) {         return (             <div classname="col-md-2 col-sm-3 col-xs-6 grid-figure" key={i+1}>                 <figure>                     <div classname="rewardimage thumbnail_wrapper">                         <img src={product.picture} alt="#"/>                     </div>                     <figcaption classname="title">{product.name}</figcaption>                     <div classname="col-md-5 col-sm-5 col-xs-5 padding-none">                         <figcaption classname="price">{product.cost_min}</figcaption>                     </div>                     <div classname="col-md-7 col-sm-7 col-xs-7 padding-none">                         <figcaption classname="due"><div classname="clock-builder-output"></div></figcaption>                     </div>                     <div classname="col-md-12 col-sm-12 col-xs-12 padding-none">                         <button type="button" classname="btn btn-primary" onclick={self.clickhandler.bind(self, product.productid)}>ĐẤu giÁ</button>                     </div>                 </figure>             </div>             <script type="text/javascript">                 $(function(){                     flipclock.lang.custom = {                         days:'days',                         hours:'hours',                         minutes:'minutes',                         seconds:'seconds'                     }                     var opts = {                         clockface: 'dailycounter',                         countdown: true,                         language: 'custom'                     }                     var countdown = product.deadline - ((new date().gettime())/1000)                     countdown = math.max(1, countdown);                     $('.clock-builder-output').flipclock(countdown, opts)                 })             </script>         )      } 

it's error this

error in ./public/js/components/gridproducts.js module build failed: syntaxerror: adjacent jsx elements must wrapped in enclosing tag (73:4)    71 |                  </figure>   72 |              </div> > 73 |              <script type="text/javascript">    |                ^   74 |                  $(function(){   75 |                      flipclock.lang.custom = {   76 |                          days:'days', 

i tried in componentwillmount script, how can derive value "product.deadline".
using react, should use perplexed problem

you not want this. should use react's lifecycle methods interact dom. in case, dom available in componentdidmount() lifecycle method , able jquery inside of that.

https://facebook.github.io/react/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class


Comments

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -