CODEWITHSUNDEEP
jqueryreactjsreduxnext.js
Komail Fayazbakhsh
Komail Fayazbakhsh

Reputation: 384

Jquery does not work in render() method of class but works in componentDidMount()

I update my packages to latest version. in before there was no error in my project. but after update next js to version 9 and jquery to version 3.5, $.map does not work properly. when i use $.map in render() method of class component,

import $ from "jquery";
.
.
.

render() {

        let rec = [
            {'id':2},
            {'id':3},
            ];

        $.map(rec, function (value) {
            console.log('value',value.id);
        });

        return (

it returns this error.

TypeError: jquery__WEBPACK_IMPORTED_MODULE_7___default.a.map is not a function

> 33 | $.map(rec, function (value) {
     | ^  34 |     console.log('value',value.id);
  35 | });

but in componentDidMount it works properly

componentDidMount = () => {
        let rec = [
            {'id':2},
            {'id':3},
        ];
        $.map(rec, function (value) {
            console.log('value',value.id);
        });
    }

this is my package.json file content:

{
  "name": "ssr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "author": "Emmanuel Henri",
  "license": "ISC",
  "dependencies": {
    "@types/node": "^13.13.5",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.7",
    "@types/react-redux": "^7.1.8",
    "@zeit/next-css": "1.0.1",
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "isomorphic-unfetch": "^3.0.0",
    "jquery": "^3.5.1",
    "moment-jalaali": "^0.9.2",
    "next": "^9.3.6",
    "next-redux-wrapper": "^5.0.0",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-datepicker2": "^3.2.0",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "ts-loader": "^7.0.3",
    "typesafe-actions": "^5.1.0",
    "typescript": "^3.8.3"
  },
  "proxy": "http://localhost:8000",
  "devDependencies": {
    "package": "^1.0.1"
  }
}

Upvotes: 0

Views: 223

Answers (1)

markerikson
markerikson

Reputation: 67547

There's multiple problems here:

  • In general, you shouldn't be using jQuery in a React app. jQuery is primarily a DOM manipulation library. React creates and updates DOM, and if other code modifies the DOM that React "owns", things tend to break. (There are times when you might need to have some interop between React and jQuery, like wrapping a jQuery plugin in a React component as an app is being migrated, but most of the time use of React means you shouldn't use jQuery at all.)
  • Don't use $.map() for looping over arrays. Arrays already have a built in Array.map() function.
  • Since render() will run for the first time before the component mounts, it's very likely that the global $ variable hasn't been initialized yet somehow.

But yeah, don't use jQuery here.

Upvotes: 2

Related Questions