Upgrade jQuery project to React / use jqwidgets in jQuery functions in React

[thomasa00Participant]

Hi,

I have a huge project, written in JS / jQuery using the jQuery methods to implement jqwidgets, e.g.
$("#myInput").jqxInput({ width: '300px', height: '25px', theme: jqtheme });

Now I like to use react for new parts of the project, without rewriting the whole project. But I always get .jqxInput is not a function
I’m new to react, so maybe the solution is simple

Here a code example:

import React, {Component} from 'react';
import $ from "jquery";
import "jqwidgets-scripts/jqwidgets/jqx-all";

class TestPage extends React.Component {
  componentDidMount() {
    let countries = ["Afghanistan", "Albania", "Algeria"];
    $(".test").jqxInput({placeHolder: "Enter a Country", height: 30, width: 250, minLength: 1,  source: countries });
  }

  render () {
    return (
      <div>
        <input className="test" type="text" />
      </div>
    );
  }
};

export default TestPage;

Here my dependencies in package.json:

  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@fontsource/roboto": "^4.5.8",
    "@mui/icons-material": "^5.10.6",
    "@mui/material": "^5.10.8",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "ag-grid": "^18.1.2",
    "clockpicker": "^0.0.7",
    "jquery": "^3.6.1",
    "jquery-clock-timepicker": "^2.6.2",
    "jqwidgets-scripts": "^14.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.37.0",
    "react-router": "^6.4.2",
    "react-router-dom": "^6.4.2",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

I followed an example how to integreate jQuery libraries in react (in my case the example was to integrate jquery-clock-timepicker), this worked fine. But with jqwidgets I had no luck …

I hope someone had the same issue & can help

Thanks a lot,
Thomas.

[adminKeymaster]

Hi Thomas,

If you’re new and just getting with a new project, I would suggest you consider also the https://www.htmlelements.com/react/. This is our new product specifically built for React.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts