I am using typescript with react, and I get this error.

Cannot invoke an object which is possibly 'undefined'.ts(2722)

const onChange: ((...args: any[]) => any) | undefined

Here is my code where I get the errors.

interface FilterGroupsProps {

  data?: any[];

  selectedGroups?: any[];

  onChange?: (...args: any[]) => any;

}



// Inside the class

  onClick = (groupName: string) => (event: MouseEvent<HTMLButtonElement>) => {

    const { onChange } = this.props;

    event.preventDefault();

    onChange(groupName);

  };



//Inside the render:

          {allUniqueGroups.map((group: string) => (

            <a

              key={group}

              className=dropdown-item d-flex justify-content-between align-items-center

              href=#

              onClick={this.onClick(group)}

            >

What I do not understand with this error is the following: The groupName should be available when this onClick is rendered.

Which means I am kind of confused where my security case should be handled. Can you explain the problem here? As well as provide me with a solution to this problem.