1

I am receiving an error "'$' is not defined" in my React web app. I use create-react-app to initialize the app. I read that I need to import jquery $ into my app but I did not need to use that for another react application I made.

The problem comes from my lines within the _login() function:

const email = $("#email").val()
const password = $("#password").val()

I am getting the values of email and password from the input tags using template literals. From using React 16.0 I should be fine not import $ from jQuery, especially if my other project did not have to. 

import React, {Component} from 'react';
import styled from 'styled-components';
import axios from 'axios';

const Container = styled.div`
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
`;

class LoginScreen extends Component {
 constructor(props){
 super(props);
 this.state ={
   clients: [],
   projects: [],
  }
 }

 _login = () => {
  const email = $("#email").val()
  const password = $("#password").val()
  const request = {"auth": {"email": email, "password": password}}
  console.log(request)
  axios.post('http://localhost:3000/api/user_token',
  'auth': request
  ).then(response => {
  console.log(response)
  }).catch(error => console.log(error))
 }

 render(){
 return(
  <Container>
    Login
    <form>
      <label>Email: </label>
      <input
        id="email"
        name="email"
        type="email"
      />
      <label>Password: </label>
      <input
        id="password"
        name="password"
        type="password"
      />
    </form>
    <button
      onClick={this._login}
      >
      Log In
    </button>
  </Container>
  )
 }
}

export default LoginScreen;

Package.json

"dependencies": {
"@material-ui/core": "^1.1.0",
"axios": "^0.18.0",
"immutability-helper": "^2.7.0",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4",
"styled-components": "^3.3.0"
},
Andre Gomes
  • 81
  • 1
  • 12
  • does `react` "automatically" include jquery? – Jaromanda X Jun 13 '18 at 02:47
  • `$(element).val()` is jQuery, and AFAIK, React does not automatically include it. You need to include the plugin. – Obsidian Age Jun 13 '18 at 02:48
  • not unless its added as a dependency. – Pheonix2105 Jun 13 '18 at 02:48
  • Your previous project may have loaded jQuery/$ into the global scope so you did not have to worry about using `import` or `require` in your script. You'll have to do the same in this case, recommended way would be to use import or require, or vanilla JS – Dan D Jun 13 '18 at 02:53
  • 1
    React definitely does not include jQuery. If you want to use a lightweight subset of jQ, zepto might be what you’re looking for. Check out https://www.npmjs.com/package/zepto – mccambridge Jun 13 '18 at 03:35

1 Answers1

4

You don't seem to be referencing jQuery anywhere in your code. In your previous project you were probably using a package that depended on it. See this other question for your reference: How to use JQuery on ReactJS

Martin
  • 475
  • 4
  • 14
  • That is a *"vote to close"* reference you'll have the [**priviledge**](https://stackoverflow.com/help/privileges) to cast in 20 rep. points *(see 250)*... So about the relevancy of the link provided: I upvote. *.oO(It could have been a comment too.)* – Louys Patrice Bessette Jun 13 '18 at 02:55