title: Login Function React Js
body: <p>I'm trying to set up a login function in my react project ,
  I created a login function in my <code>auth.js</code> file like this :</p>
  
  <pre><code>export function login(data) {
  
  const endpoint = 'http://127.0.0.1:8000/api/auth/jwt/'
  const csrfToken = cookie.load('csrftoken')
  let thisComp = this
  if (csrfToken !== undefined) {
    let lookupOptions = {
        method: "POST",
        headers: {
            'Content-Type': 'application/json'
  
        },
        body: JSON.stringify(data),
        credentials: 'include'
    }
  
    fetch(endpoint, lookupOptions)
    .then(function(response){
        return response.json()
    }).then(function(responseData){
        console.log(responseData)
        localStorage.token = responseData.token
        localStorage.expires = responseData.expires // Store the token
        console.log("Token Stored", localStorage.token)
        console.log("Token Expires", responseData.expires)
        refreshToken(localStorage.token)
  
  
  
      }).catch(function(error){
  
        console.log("error", error)
    })
   }
  
  }
  </code></pre>
  
  <p>Then I call this function in my Login component like this : </p>
  
  <pre><code>export class Login extends Component {
  
  constructor(props){
   super(props)
   this.onSubmit = this.onSubmit.bind(this)
   this.handleInputChange = this.handleInputChange.bind(this)
   this.state = {
       username: null,
       password: null,
  
   }
   }
  
   onSubmit(event) {
    event.preventDefault()
    let data = this.state
    console.log(data)
    login(data)
  
  
  
    }
  
    handleInputChange(event){
     event.preventDefault()
     console.log(event.target.name, event.target.value)
     let key = event.target.name
     let value = event.target.value
     this.setState({
       [key]: value
    })
    }
  
    componentDidMount(){
     this.setState({
      username: null,
      password: null,
  
     })
  
     }
  
     render() {
        return (
          &lt;div className="orderweb__432c603c" data- 
           reactid=".ovvy6jmxvk.2"&gt;
              &lt;h1 className="ccl-2a4b5924e2237093 ccl-21bead492ce4ada2 
              ccl-99c566dc40a8a156 ccl-0338edd3d4c3a41b" data- 
              reactid=".ovvy6jmxvk.2.0"&gt;Welcome back&lt;/h1&gt;
              &lt;form  noValidate data-reactid=".ovvy6jmxvk.2.1" onSubmit= 
               {this.onSubmit}&gt;
                  &lt;div className="ccl-b176b26fc7009752" data- 
                   reactid=".ovvy6jmxvk.2.1.1"&gt;
                      &lt;label className="ccl-19882374e640f487 ccl- 
                       417df52a76832172 ccl-dfaaa1af6c70149c ccl- 
                       9d0a5327c911d0f3 ccl-094acd7546498021 ccl- 
                       b79f709a3ebf5895" htmlFor="login_email" data- 
                       reactid=".ovvy6jmxvk.2.1.1.0"&gt;Email address&lt;/label&gt;
                      &lt;div className="orderweb__15cc2e48" data- 
                      reactid=".ovvy6jmxvk.2.1.1.1"&gt;&lt;input id='username' 
                      name='username' className="orderweb__e9fe3b76" 
                      placeholder="Username"  spellCheck="true" 
                      autoCorrect="on" required aria-invalid="false" aria- 
                      required="true" rows={1} data- 
                      reactid=".ovvy6jmxvk.2.1.1.1.0" onChange= 
                      {this.handleInputChange} /&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="ccl-b176b26fc7009752" data-reactid=".ovvy6jmxvk.2.1.2"&gt;
                      &lt;label className="ccl-19882374e640f487 ccl-417df52a76832172 ccl-dfaaa1af6c70149c ccl-9d0a5327c911d0f3 ccl-094acd7546498021 ccl-b79f709a3ebf5895" htmlFor="login_password" data-reactid=".ovvy6jmxvk.2.1.2.0"&gt;Password&lt;/label&gt;
                      &lt;div className="orderweb__15cc2e48" data-reactid=".ovvy6jmxvk.2.1.2.1"&gt;&lt;input id='password' name='password' type="password" inputMode="password" className="orderweb__e9fe3b76" placeholder="Password" spellCheck="true" autoCorrect="on" required aria-invalid="false" aria-required="true" rows={1} data-reactid=".ovvy6jmxvk.2.1.2.1.0" onChange={this.handleInputChange}/&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;a href="/password_reset" className="orderweb__de36b0c3" data-reactid=".ovvy6jmxvk.2.1.3"&gt;Forgot password?&lt;/a&gt;&lt;span className="ccl-67e0c7f3fe50cf69 ccl-a97a150ddadaa172 ccl-b176b26fc7009752" data-reactid=".ovvy6jmxvk.2.1.4"&gt;&lt;button className="ccl-d0484b0360a2b432 ccl-233931c277401e86 ccl-ed9aadeaa18a9f19 ccl-a97a150ddadaa172" type="submit" tabIndex={0} data-reactid=".ovvy6jmxvk.2.1.4.0"&gt;&lt;span className="ccl-cce251427bbe4ec4" data-reactid=".ovvy6jmxvk.2.1.4.0.1"&gt;&lt;span data-reactid=".ovvy6jmxvk.2.1.4.0.1.1"&gt;Login&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/span&gt;
                  &lt;p className="ccl-19882374e640f487 ccl-1daa0367dee37c3b ccl-dfaaa1af6c70149c ccl-b176b26fc7009752" data-reactid=".ovvy6jmxvk.2.1.5"&gt;&lt;span data-reactid=".ovvy6jmxvk.2.1.5.0"&gt;Don't have an account yet?&lt;br /&gt;Just place an order to create one.&lt;/span&gt;&lt;/p&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      );
  }
  }
  
  export default Login
  </code></pre>
  
  <p>But when I click on the submit button nothing happen , I try with console.log(Hello) That is work but that is don't run the login function </p>