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

Question

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

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

@CherryDT just like this ? `(res => this.setState(this.state))`? — , Sep 21 '21 at 14:08
`Unhandled Rejection (Error): setState(...): takes an object of state variables to update or a function which returns an object of state variables.` — , Sep 21 '21 at 14:11
Please don't repurpose a question. The old one should be solved (you can accept my answer if you wish) and a new one created. I'm reverting your edit. Thank you — CherryDT, Sep 21 '21 at 14:16

score 2 · Accepted Answer · answered Sep 21 '21 at 14:14

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?

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

1 Answers1