How to use a JS library which is already provided by an html designer in React component, the js library is nice-select.sj?

Question

I have a html designed by a HTML Designer. He has used nice-select.js for a dropdown menu. I imported it into my index.html and executed this :

$(document).ready(function(e){
    $(".drop").niceSelect();
}

And it works fine when it is loaded in the first page. But on clicking a menu item which points to a different component, the js does not initiated here and the design does not go for that component.

Now how to use this $ function in ComponentdidMountMethod()?

I have install the jquery using npm install jquery --save and tried to use it but got an error niceSelect is not a function.

Can anyone help in this regards.

Thanks in advance.

import React, { Component } from 'react';
import{Link} from 'react-router-dom';
import $ from 'jquery';

$(".drop").niceSelect();

This gives an error nice select is not a function.

Answer 1

I have the same problem. I solved this problem in this way.

import React from 'react';
import {Link} from 'react-router-dom';
import $ from 'jquery';
import '../../css/nice-select.css';
import '../../js/nice';

class Name extends React.Component{
render(){
    $(document).ready(function() {
        $('.drop').niceSelect();
      });
    return (
        <select class="drop">...</select>
    );
 }
}

export default Name;