Props undefined when calling a method in a react component - reactjs

Question

I have a component with a list of child components. When I call a method from the parent component from the child component and, in the code I am using props, I get an
"Uncaught TypeError: Cannot read property 'activeStep' of undefined"
Where activeStep is a member of props.
Here is the relevant part om my code.
Parent component
import { Component, ReactNode, createElement, ReactFragment } from "react";
import { SlidingWizardStepComponent } from "./SlidingWizardStepComponent";
export interface SlidingWizardComponentProps {
activeStep: number;
}
export class SlidingWizardComponent extends Component<SlidingWizardComponentProps> {
getWizard = (): JSX.Element[] => {
if (!this.props.activeStep && this.props.activeStep !== 0) {
return [];
}
return = this.createWizard();
};
private setActiveStep(clickedStep: number): void {
if (clickedStep !== this.props.activeStep) {
this.props.setActiveStep(clickedStep);
}
}
private createWizard(): JSX.Element[] {
const wizardSteps: JSX.Element[] = [];
for (let i = 0; i < this.props.numberOfSteps; i++) {
wizardSteps.push(
<SlidingWizardStepComponent setActiveStep={this.setActiveStep} />
);
}
return wizardSteps;
}
render(): ReactNode {
return (
<div className="slide-wizard">
{this.getWizard()}
</div>
);
}
}
Child component
import { Component, ReactNode, createElement, ReactFragment } from "react";
export interface SlidingWizardStepComponentProps {
setActiveStep: (clickedStep: number) => void;
}
export class SlidingWizardStepComponent extends Component<SlidingWizardStepComponentProps> {
private setActiveStep(): void {
this.props.setActiveStep(this.props.stepIndex);
}
render(): ReactNode {
return (
<div onClick={() => this.setActiveStep()}>
Content
</div>
);
}
}
EDIT: When I add a constructor to the code and I log my props in the constructor, they seem to be set!
EDIT 2: The parent component itself is called by another component that looks like this in its stripped down form:
import { Component, ReactNode, createElement, ReactFragment } from "react";
import { SlidingWizardComponent } from "./components/SlidingWizardComponent";
import Big from "big.js";
import { SlidingWizardContainerProps } from "../typings/SlidingWizardProps";
import "./ui/SlidingWizard.css";
export interface State {
activeStep: number;
clickedStep: number;
}
export default class SlidingWizard extends Component<SlidingWizardContainerProps, State> {
state: State = {
activeStep: parseInt(this.props.activeStep.displayValue, 10),
clickedStep: parseInt(this.props.clickedStep.displayValue, 10)
};
resetActiveStep = (): void => {
this.props.activeStep.setValue(new Big(0));
this.setState({
activeStep: 0
});
};
setActiveStep = (clickedStep: number): void => {
this.props.clickedStep.setValue(new Big(clickedStep));
if (this.props.onActiveStepChange) {
this.props.onActiveStepChange.execute();
}
};
render(): ReactNode {
return (
<SlidingWizardComponent
activeStep={this.state.activeStep}
/>
);
}
}
This widget is used in a Mendix application. The parameters used in this top component are defined through an xml file.

Answer 1

Although I still do not know why the original code did not work, I was able to solve it by:
In the parent component in the createWizard method, change setActiveStep={this.setActiveStep} to setActiveStep={this.props.setActiveStep}
Remove the setActiveStep method from the parent component