Jquery in React is not defined
JavascriptJqueryAjaxReactjsJavascript Problem Overview
Hi I just want to receive ajax request, but the problem is that jquery is not defined in React. React version is 14.0
Error message
Uncaught ReferenceError: $ is not defined
I have two files :
index.js
import React from 'react';
import { render } from 'react-dom';
import App from './containers/App';
const root = document.getElementById('root');
render(
<App source='https://api.github.com/users/octocat/gists' />,
root
);
app.js
import React, { Component } from 'react';
export default class App extends Component {
componentDidMount() {
const { source } = this.props;
console.log($); // throws error
}
render() {
return (
<h1>Hey there.</h1>
);
}
}
Javascript Solutions
Solution 1 - Javascript
Try add jQuery
to your project, like
npm i jquery --save
or if you use bower
bower i jquery --save
then
import $ from 'jquery';
Solution 2 - Javascript
> I just want to receive ajax request, but the problem is that jQuery is not defined in React.
Then don't use it. Use Fetch and have a look at https://stackoverflow.com/questions/41125933/fetch-polyfill-in-react-not-completely-working-in-ie-11 to see example of alternative ways to get it running
Something like this
const that = this;
fetch('http://jsonplaceholder.typicode.com/posts')
.then(function(response) { return response.json(); })
.then(function(myJson) {
that.setState({data: myJson}); // for example
});
Solution 3 - Javascript
It happens mostly when JQuery
is not installed in your project.
Install JQuery in your project by following commands according to your package manager.
Yarn
yarn add jquery
npm
npm i jquery --save
After this just import $
in your project file.
import $ from 'jquery'
Solution 4 - Javascript
Isn't easier than doing like :
1- Install jquery in your project:
yarn add jquery
2- Import jquery and start playing with DOM:
import $ from 'jquery';
Solution 5 - Javascript
Just a note: if you use arrow functions you don't need the const that = this part. It might look like this:
fetch('http://jsonplaceholder.typicode.com/posts')
.then((response) => { return response.json(); })
.then((myJson) => {
this.setState({data: myJson}); // for example
});
Solution 6 - Javascript
Add "ref" to h1 tag :
<h1 ref="source">Hey there.</h1>
and
const { source } = this.props;
change to const { source } = this.refs;