CODEWITHSUNDEEP
javascriptreactjs
user15404864
user15404864

Reputation:

Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'setState')

Why I am having this error? Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'setState')? is this because of this doesn't detect in the addDepartment it can not understand that this is the CustomToolbar component? please help.

class CustomToolbar extends React.Component {
  //

  constructor(props) {
    super(props)
    this.HandleAdd = this.HandleAdd.bind(this);
    }
  HandleAdd = () => {
  Swal.fire({
    title: 'Add Department',
    text: "Input department name below.",
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Save',
    html: generateInputForms({
      strname: '',
      intsequence: ''
    }),

    preConfirm: () => {
      let strname = document.getElementById('strname').value;
      let intsequence = document.getElementById('intsequence').value;
 
      if (!strname) {
        Swal.showValidationMessage('The Department field is required.')
      }
      if (!intsequence) {
        Swal.showValidationMessage('The Sequence field is required.')
      }
      return {
        strname: document.getElementById('strname').value,
        intsequence: document.getElementById('intsequence').value
      }
    }
  }).then((result) => {
    if (result.isConfirmed) {
      let request = {
        strresourcename: "Richard",
        strapplicationcode: "SchoolApp",
        strmodulename: "Department",
        strtablename: "fmDepartments",
        strfieldid: "fmDepartmentsId",
        strname:document.getElementById('strname').value,
        intsequence:document.getElementById('intsequence').value
      }
      addDepartment(request).then(function(res){
        if (res.status == 200){
          Swal.fire({
            icon: 'success',
            title: 'Department',
            text: 'New Department has been added successfully.',
          }).then((res) => this.setState(Department))
        }else{
          Swal.fire({
            icon: 'error',
            title: 'Oops',
            text: 'Something went wrong.',
          })
        }
      })
    }
  })
}
  render() {
    const { classes } = this.props;

    return (
      <React.Fragment>
        <Tooltip title={"Add"}>
            <Button
              variant="contained"
              color="primary"
              size="small"
              style={{
                textTransform: 'unset',
                outline: 'none',
                marginLeft: 20,
                backgroundColor: '#00B029',
              }}
              onClick={this.HandleAdd}
              className={classes.button}
              startIcon={<AddIcon className={classes.addIcon} style={{color: '#fff',}} />}
            >
              Add
            </Button>
        </Tooltip>
      </React.Fragment>
    );
  }

}

error image

enter image description here

Please ignore this meesage because so I can post a question here, thanks.

Upvotes: 2

Views: 5999

Answers (1)

CherryDT
CherryDT

Reputation: 29011

You currently use a regular function as the callback to addDepartment(...).then which will have its own this (in this case undefined because the caller doesn't bind anything). Use an arrow function instead which doesn't have its own this. Change function (res) to res =>:

addDepartment(request).then(res => {
  // ...
})

For more details, see Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?

Upvotes: 2

Related Questions