Passing props not working in a nested function

November 3, 2022

When I pass the props to the OnBeforeSend function it works, but once I put it inside the nested args.ajaxsettings function it does not work.

export default class FileManager extends React.PureComponent {
  
  hostUrl = "https://amazons3.azurewebsites.net/api/AmazonS3Provider/";

  constructor(props) {
    super(props);
    this.fileSelection= this.fileSelection.bind(this);
  } 
  

  onBeforeSend(args) {  
    //this works
    console.log(this.props.team_id);

    args.ajaxSettings.beforeSend = function (args) {
      
      //this one doesn't work
      console.log(this.props.team_id);


      args.httpRequest.setRequestHeader('Authorization', 'public/');

    };

  }

In the console, it returns the error Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'team_id')

Any guidance on how to get the second console.log(this.props.team_id); to work would be greatly appreciated

>Solution :

You are using this in a scope function call. Try using an arrow function instead:

args.ajaxSettings.beforeSend = (args) => {
  
  //this one doesn't work
  console.log(this.props.team_id);


  args.httpRequest.setRequestHeader('Authorization', 'public/');

};