Hi I just want to receive ajax request, but the problem is that jquery is not defined in React. React version is 14.0
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>
);
}
}
This question is related to
javascript
jquery
ajax
reactjs
Add "ref" to h1 tag :
<h1 ref="source">Hey there.</h1>
and
const { source } = this.props;
change to const { source } = this.refs;
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
});
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';
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 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
});
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 add jquery
npm i jquery --save
After this just import $
in your project file.
import $ from 'jquery'
Source: Stackoverflow.com