'$' is not defined when Replacing JSON with Jquery in ReactJS

Question

I am learning ReactJS for a web application that uses JQuery to load JSON-encoded data from a remote source.

In this sample, this.state is manually set to JSON-encoded data

import React, { Component } from 'react';
import Projects from './Components/Projects';
import './App.css';

class App extends Component {
  constructor(){
    super();
    this.state = {
      projects: [
        {
          title: 'Buisness Website',
          category: 'Web Design'
        },
        {
          title: 'Social App',
          category: 'Mobile Development'
        },
        {
          title: 'Ecommerce Shopping Cart',
          category: 'Web Development'
        }
      ]
    }
  }

  render() {
    return (
      <div className="App">
        My App
        <Projects projects={this.state.projects}/>
      </div>
    );
  }
}

export default App;

I would like to use Jquery to load the data from a remote location. I tried

this.state =  $.getJSON('remote.json', function (data) {
        console.log(data);
});

Unfortunately, when running the site, I get an error: '$' is not defined. How can I fix this? Please note that I included

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

in the head of index.html

EDIT: Keep in mind that the JSON file will not be local.

you forgot some jquery versions :)) why do you have 2 jquery files? — madalinivascu
– madalinivascu, Commented May 31, 2017 at 6:28
you need to import $ from jquery, like this: import $ from 'jquery'; check this answer, it will help you: stackoverflow.com/a/44259149/5185595 — Mayank Shukla
– Mayank Shukla, Commented May 31, 2017 at 6:31

Mμ. · Accepted Answer · 2017-05-31 06:49:12Z

2

From my understanding, you want to use jquery on your project. To fix your issue, you just have to install jquery and include it in your project, like so in your command line:

npm install --save jquery

then on the file that uses jquery, import it:

import $ from 'jquery';

It looks like you are trying to set a state based on the result of the getJSON method, a correct way of doing it would be something like this:

$.getJSON('remote.json',(data) => {
  this.setState({ myStateData: data })
});

An alternative, would be to use the fetch, and your code would look something like this:

fetch('remote.json').then(data => this.setState({ myStateData: data }));

The above examples assume your state has the property myStateData.

edited May 31, 2017 at 6:49

answered May 31, 2017 at 6:45

Mμ.

8,5723 gold badges28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ethernetz Over a year ago

Works perfectly now.

Shubham Khatri · Accepted Answer · 2017-05-31 06:48:22Z

2

Instead of using Jquery to load a localJSON file you can configure your webpack

First install json-loader with

npm i json-loader --save-dev

Then configure your webpack with this loader

loaders: [
  { test: /\.json$/, loader: 'json' },
  // other loaders 
]

Now in your file you can import your json like

   import remote from '.path/to/remote.json';

However if your json files are remote, you have multiple options to do ajax requests

You can use packages like axios, node-fetch, jquery

Since you are using jquery , you should install

   npm install -S jquery

and import as

  import $ from 'jquery'

edited May 31, 2017 at 6:48

answered May 31, 2017 at 6:39

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

2 Comments

Ethernetz Over a year ago

Will this work if the JSON file is not local? I have been keeping it local for testing purposes, but eventually I will want to retrieve it from a server. Sorry for the confusion.

Shubham Khatri Over a year ago

No it wont work, for remote files. In that case its better to have ajax request with npm packages node-fetch or axios.

Collectives™ on Stack Overflow

'$' is not defined when Replacing JSON with Jquery in ReactJS

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related