How to use this plugin in React component ?

[swetansh]

I tried using this https://reactjs.org/docs/integrating-with-other-libraries.html to integrate this plugin in React but it didn't helped.
Aslo I tried https://medium.com/@shuvohabib/using-jquery-in-react-component-the-refs-way-969de9aa651f too but this shows error.
TypeError: this.$el.comboTree is not a function

My code looks like this -

import React, { Component } from "react";
import _ from "lodash";
import { findDOMNode } from "react-dom";
import $ from "jquery";

var SampleJSONData = [
  {
    id: 0,
    title: "Horse",
  },
  {
    id: 1,
    title: "Birds",
    isSelectable: false,
    subs: [
      {
        id: 10,
        title: "Pigeon",
        isSelectable: false,
      },
      {
        id: 11,
        title: "Parrot",
      },
      {
        id: 12,
        title: "Owl",
      },
      {
        id: 13,
        title: "Falcon",
      },
    ],
  },
  {
    id: 2,
    title: "Rabbit",
  },
  {
    id: 3,
    title: "Fox",
  },
  {
    id: 5,
    title: "Cats",
    subs: [
      {
        id: 50,
        title: "Kitty",
      },
      {
        id: 51,
        title: "Bigs",
        subs: [
          {
            id: 510,
            title: "Cheetah",
          },
          {
            id: 511,
            title: "Jaguar",
          },
          {
            id: 512,
            title: "Leopard",
          },
        ],
      },
    ],
  },
  {
    id: 6,
    title: "Fish",
  },
];

class SearchTreeView extends Component {
  componentDidMount() {
    const el = findDOMNode(this.refs.justAnotherInputBox);
    $(el).comboTree({
      source: SampleJSONData,
      isMultiple: false,
    });
  }

  render() {
    return (
      <div>
        <input
          type="text"
          id="justAnotherInputBox"
          placeholder="Type to filter"
          autocomplete="off"
          ref="justAnotherInputBox"
        />
      </div>
    );
  }
}

export default SearchTreeView;

[swetansh]

Please help to integrate this to react

[swetansh]

Tried this one too but this is also showing error.

import React, { Component } from "react";
import _ from "lodash";
import { findDOMNode } from "react-dom";
import $ from "jquery";

var SampleJSONData = [
  {
    id: 0,
    title: "Horse",
  },
  {
    id: 1,
    title: "Birds",
    isSelectable: false,
    subs: [
      {
        id: 10,
        title: "Pigeon",
        isSelectable: false,
      },
      {
        id: 11,
        title: "Parrot",
      },
      {
        id: 12,
        title: "Owl",
      },
      {
        id: 13,
        title: "Falcon",
      },
    ],
  },
  {
    id: 2,
    title: "Rabbit",
  },
  {
    id: 3,
    title: "Fox",
  },
  {
    id: 5,
    title: "Cats",
    subs: [
      {
        id: 50,
        title: "Kitty",
      },
      {
        id: 51,
        title: "Bigs",
        subs: [
          {
            id: 510,
            title: "Cheetah",
          },
          {
            id: 511,
            title: "Jaguar",
          },
          {
            id: 512,
            title: "Leopard",
          },
        ],
      },
    ],
  },
  {
    id: 6,
    title: "Fish",
  },
];

class SearchTreeView extends Component {
  componentDidMount() {
    this.$el = $(this.el);
    this.$el.comboTree({
        source: SampleJSONData,
        isMultiple: false,
    });
  }

  render() {
    return (
      <div>
        <input
          type="text"
          id="justAnotherInputBox"
          placeholder="Type to filter"
          autocomplete="off"
          ref={el => this.el = el}
        />
      </div>
    );
  }
}

export default SearchTreeView;