Using third party library with react js giving error

Question

I am trying to use third party plugins like bootstrap-tagsinout and noUiSlider in my react application. I have installed the libraries via npm to my package.json. Currently I am initializing the plugins in my componentDidMount method. This is how I do it

componentDidMount = () => {

        $(document).ready(function() {
            // Apply the plugin to the element
            $("#ionSlider-newTag").ionRangeSlider({
                min: 0,
                max: 5000,
                type: 'double',
                postfix: 's',
                maxPostfix: "+",
                prettify: false,
                hasGrid: true,
                from: 1600,
                to: 2950
            });
        });

        $(document).ready(function() {
            $('#tagsinput').tagsinput({
                typeahead: {
                    source: ['Smoking, Drinking, Eating']
                }
            });
        });

        $(document).ready(function() {
            // Apply the plugin to the element
            $("#noUiSlider").noUiSlider({
                start: 40,
                connect: "lower",
                range: {
                    'min': 0,
                    'max': 100
                }
            });
        });

And here is my div for tagsinput

<div className="form-group form-group-default">
                                        <label>Tags</label>
                                        <input id="#tagsinput" type="text" value="Smoking,Drinking" data-role="tagsinput"/>
                                    </div>

When I run it, i get an error saying

index.js:121 Uncaught TypeError: $(...).tagsinput is not a function

and

index.js:121 Uncaught TypeError: $(...).noUiSlider is not a function

I imported the plugins in my react component

import 'ion-rangeslider'
import 'bootstrap-tagsinput'
import 'nouislider'
import $ from 'jquery'

I have looked for all the question already existing and tried them. But nothing worked. What an I doing wrong?

Update

I tried using refs, but didn't help

 <input id="#tagsinput" type="text"  ref={(input) => {textInput = input; }}  value="Smoking,Drinking" data-role="tagsinput"/>

textInput.tagsinput({
                typeahead: {
                    source: ['Smoking, Drinking, Eating']
                }
            });

But I am getting this error

Uncaught TypeError: Cannot read property 'tagsinput' of undefined

RickTakes RickTakes · Accepted Answer · 2017-06-02T16:28:09

Using jQuery within a react component is not recommended, because of the way React handles the virtual DOM and diffing. In short React tracks elements in the DOM and adds / removes / updates them when appropriate and performant. As a result the elements you're looking for with jQuery may not exist in the DOM yet. Also the $(document).ready... wrapper is not being run until the component is mounted, and thus the document ready event has probably fired before the jQuery is run.

You'll want to look into using React refs to get access to DOM elements in React: https://facebook.github.io/react/docs/refs-and-the-dom.html

Using third party library with react js giving error

2 Answers