Calling functions inside a axios function definition in react.js laravel combination project

Question

I configured my project using npm install,npm intstall axios,npm install sweetalert-react,npm install react react-dom redux react-redux --save,npm install react-redux-form@latest --save commands.I am trying to implement a axios functionality.My problem is i can't call another member function from axios function definition in laravel-react combination.js.Also i found that this.setState not working inside axios function definition.I spent moretime time to find a solution.One post i found is solution relates to jsfiddle method in stackoverflow.But it is not working in my project.I found functions are not called by sweetalert not working as it's show property not changed in side functions. This is my jsx file.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { LocalForm, Control } from 'react-redux-form';
import SweetAlert from 'sweetalert-react';
import 'sweetalert/dist/sweetalert.css';
import axios from 'axios';
export default class MyApp extends React.Component {
    constructor(props)
    {
       super(props);
       this.state={ show:false,message:''}   
    }

  handleChange(values) {  }
  handleUpdate(form) {  }
  handleSubmit(values) { 

    axios.post('/log-in/',{
        username:'username',
        password:'password'
    }).then(function(response)
    {

        this.display(response.data);
    }).catch(function(error)
    {
        this.display(error);    
    });
     display(data)
   {
      this.setState({ message:data});
      this.setState({ show:true})
   }    
   }
  render() {
    return (
        <div id="log-in">
        <h3 className="hh"><b>Log In</b></h3>
      <LocalForm
        onUpdate={(form) => this.handleUpdate(form)}
        onChange={(values) => this.handleChange(values)}
        onSubmit={(values) => this.handleSubmit(values)}
      >
        <div className="form-control-area">
        <label className="form-label">USERNAME</label>
        <Control.text model=".username" className="form-control" />
        </div>
        <div className="form-control-area">
        <label className="form-label">PASSWORD</label>
        <Control type="password"  model=".password" className="form-control"/>
        </div>
        <div className="form-control-area">
        <table><tr>
        <td>
        <Control type="submit"  model=".Submit" className="form-submit"/>
        </td>
        <td>
        <Control type="reset"  value="Cancel" model=".Cancel" className="form-reset"/>
        </td></tr></table>
        </div>
      </LocalForm><SweetAlert 
        show={this.state.show}
        title="Sorry"
        text={this.state.message}
        onConfirm={() => this.setState({ show: false })}
      /></div>
    );
  }
}

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}
if(document.getElementById('start'))
{
  ReactDOM.render(<MyApp />,document.getElementById('start'));
}

it is my blade file

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <title>Demo|Log In</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <link rel="stylesheet" href="{{ asset('css/login.css') }}">
    </head>
    <body>
        <div id="start"></div>
        <div id="alert"></div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

Please help me to fix this bug

score 1 · Answer 1 · answered Sep 27 '18 at 06:18

1

Use arrow function:

.then((response) =>
  {
    this.display(response.data);
  })

Or, bind this:

.then(function(response)
  {
    this.display(response.data);
  }.bind(this))

answered Sep 27 '18 at 06:18

Bhojendra Rauniyar

83,432
35
168
231

Calling functions inside a axios function definition in react.js laravel combination project

1 Answers1