0

I am using gulp to build my JSX.

As of now I have react code that uses some jQuery:

this.setState({exceptionsEdit: manual_exceptions}, function(){
    this.state.exceptionsEdit.forEach(function (exp, index){
        $('#exception-list-edit').nth-child(index).find('.ui-slider').slider("values", 0, Date.parse(this.state.exceptionsEdit[index].start)/1000)
        $('#exception-list-edit').nth-child(index).find('.ui-slider').slider("values", 1 , Date.parse(this.state.exceptionsEdit[index].end)/1000)
    })
})

I am setting the state of exceptionsEdit and then running some jQuery. But when I load my page i receive the following error:

Uncaught ReferenceError: child is not defined
         $('#exception-list-edit').nth - child(index).find('.ui-slider').slider("values", 0, Date.parse(this.state.exceptionsEdit[index].start) / 1000);

What can I do about this? Should I not use nth-child? Alternatives that are jsx/react friendly?

ApathyBear
  • 9,057
  • 14
  • 56
  • 90
  • You should not be using jQuery with react. What is the end goal your trying to accomplish? As in, what functionality do you need? – erichardson30 Jul 20 '16 at 16:41
  • @erichardson30 I understand that. But this UI slider is a jquery library. This slider is the exception to the rule and I HAVE to use it. I am simply trying to update the sliders nob values. – ApathyBear Jul 20 '16 at 16:43

1 Answers1

1

nth-child is not a simple variable name as it contains -, so it can't be referenced with ., use ['nth-child'] instead. Btw I think it should be used like 

$('#exception-list-edit:nth-child('+index+')').find...

since it's a selector, or with templates

$(`#exception-list-edit:nth-child(${index})`).find...
Igorsvee
  • 4,101
  • 1
  • 25
  • 21