'$' is not defined no-undef reactjs ajaxcall

Question

I was trying to display json data in a table format based on this answer. Everytime I run this, it shows this error Line 15: '$' is not defined no-undef. I am starting the ajax call in line 15. I've tried adding const $ = window.$; on the top of the code, but that doesn't solve anything.

class App extends React.Component {
    constructor(){
      super() 
        this.state = {
          data: []
        }
      
    }
    componentDidMount() {
      $.ajax({
         url: "http://www.mocky.io/v2/5c3f2a6c3500004d00ec3789",
         type: "GET",
         dataType: 'json',
         ContentType: 'application/json',
         success: function(data) {
           
           this.setState({data: data});
         }.bind(this),
         error: function(jqXHR) {
           console.log(jqXHR);
         }.bind(this)
      })
    }
    render() {
      
          
      return (
        <table>
        <tbody>{this.state.data.map(function(item, key) {
               
                 return (
                    <tr key = {key}>
                        <td>{item.name}</td>
                        <td>{item.post}</td>
                        <td>{item.country}</td>
                        <td>{item.contact}</td>
                    </tr>
                  )
               
               })}</tbody>
         </table>
      )
    }
  }
  


ReactDOM.render(<App />, document.getElementById('root'));

Any help with the error?

It looks like not able to find `jQuery` library. Please import `jQuery` library before your script code loaded in DOM. — Sudhir Ojha, Jan 17 '19 at 11:51

Udara Kasun · Accepted Answer · 2022-05-03T04:52:38.570

11

When using create-react-app, First You need to install the Jquery package like this.

For Mac

sudo npm install jquery --save

For Windows

npm install jquery --save

Now in the JS files you can use jquery

import $ from 'jquery';

edited May 03 '22 at 04:52

answered Jan 17 '19 at 12:00

Udara Kasun

2,182
18
25

Is `sudo` needed to install a non-global node dependency? – tbuglc Jan 17 '19 at 12:09
that resolved the error. But my table isn't showing up in the browser – Proteeti Prova Jan 17 '19 at 13:24
sudo is used in Mac environment, when you use Windows try without sudo (npm install jquery --save ) – Udara Kasun Jan 17 '19 at 15:24
I had to use `import * as $ from 'jquery';`. The import statement in the answer resulted in an error for me. – Joe23 Jul 11 '23 at 16:45

score 1 · Answer 2 · edited Jan 17 '19 at 11:52

1

You need to include jQuery library.

import $ from 'jquery';

make sure jquery package is installed.

edited Jan 17 '19 at 11:52

Just code

13,553
10
51
93

answered Jan 17 '19 at 11:51

Fotis Papadamis

184
3
14

that resolved the error. But my table isn't showing up in the browser – Proteeti Prova Jan 17 '19 at 13:24
use `console.log` to see whether the state is updated properly – Fotis Papadamis Jan 17 '19 at 13:27
It doesn't hit the ajax success function. – Proteeti Prova Jan 17 '19 at 13:44
used datatype jsonp instead of json. That solved the problem – Proteeti Prova Jan 17 '19 at 13:49
1

put a `console.log(data);` inside your `success function` to see if your data arrives as it should be. if it is okay then it has something to do with your state update – Fotis Papadamis Jan 17 '19 at 13:50
yeah tried that. That didn't solve the problem either. Just found that changing data-type from "json" to "jsonp" makes thing work – Proteeti Prova Jan 17 '19 at 13:51

score 1 · Answer 3 · answered Jan 17 '19 at 12:07

You might not even need jQuery in React, the fetch API exposes by the browser just works fine. Rather than installing the entire jQuery library to just handle Ajax request, I would go instead with axios which in my opinion is lightweight than jQuery.

'$' is not defined no-undef reactjs ajaxcall

3 Answers3