0

Its my component:

export default class loading extends Component {

    constructor(props) {
      super(props);

      /* Binding this to CallHomeApiRequest */
      this.CallHomeApiRequest = this.CallHomeApiRequest.bind(this);
    }

    /* This function requests my backend with given data to get list of places json, and pass it to another component */
    CallHomeApiRequest(data) {
      let data_to_pass_to_backend = JSON.parse(localStorage.getItem('DataSetInHome'));
      let url = "http://127.0.0.1:8000/api/home"
      console.log(data_to_pass_to_backend)
      axios({
        method: 'post',
        url: url,
        data: data_to_pass_to_backend,
        headers: {
          "content-type": "application/json"
        }
      }).then(function (response) {

        let data = response.data.data[0].json_data;
        console.log(data)
        /* Sending got data to localStorage as JSON string */
        localStorage.setItem('PlacesList', JSON.stringify(data));
        console.log("This: "+this)
        /* Changing component to placesList */
        this.props.history.push('/placesList') //this shows "cannot read propety props"

      }).catch(function (error) {
        console.log(error)
      });

    }

    render() {
      return (
        <div className="loading_component_container">

          { this.CallHomeApiRequest() }

          <LoadingScreen
              loading={true}
              bgColor='#fff'
              spinnerColor='#9ee5f8'
              textColor='#000'
              //logoSrc='/logo.png'
              text='Loading places...'
          />

        </div>
      );
    }
  }

When I route to this component my console shows:

This: undefined
loading.js:43 TypeError: Cannot read property 'props' of undefined
    at loading.js:40

I saw this question, BUT I binded my function in correct way (this.functionname = this.functionname.bind(this)).

I am pretty sure, I am missing something obvious and I cannot look on it out of the box.

My target is to just call this.props.history.push('/placesList'), so probably I can just move CallHomeApiRequest body to constructor, but maybe later, me or someone else will have similar issue.

Dolidod Teethtard
  • 553
  • 1
  • 7
  • 22
  • I think once you bind `this` in the constructor, you can access the props using just `props` instead of `this.props`. Could be wrong here though – adr5240 Jul 09 '19 at 19:28
  • @adr5240 i tried, but it doesn't help (console shows 'props' is not defined no-undef). Thank you anyway – Dolidod Teethtard Jul 09 '19 at 19:30
  • 1
    It's because you're using a function expression as the `.then` callback, which has its own context (`this`). You could use an arrow function as a quick fix, but I highly recommend reading the dupe candidate I linked and understanding how the context works in JavaScript before going further. – Emile Bergeron Jul 09 '19 at 19:33
  • 1
    Oh, its something that i didn't think about - I will read it and answer my question/edit my question/mark it as duplicate – Dolidod Teethtard Jul 09 '19 at 19:36

0 Answers0