Function in react component is "undefined" in JSX though "this" is bound

I have a function that’s returning JSX, a set of Radio inputs which are using another function to change the state. I’m dynamically returning this function with a switch statement in another function, that then it is being rendered. The function being used in the onChange in the getCarSizeQ() undefined.

  handleRadioButton = (value) => {
    this.setState({
      vehicleSize: value,
    });
  };

  getCarSizeQ() {
    return (
      <div>
        <h1>What's the size of your vehicle?</h1>
        <div className="imageSelection">
          <input
            type="radio"
            name="paint"
            id="smartCar"
            className="input-hidden"
            onChange={() => this.handleRadioButton("smartCar")}
          />
          <label for="smartCar">
            <p className="imageDesc">Smart car</p>
            <img src={smartCar} alt="Low paint defect" className="paintImage" />
          </label>

          <input
            type="radio"
            name="paint"
            id="porsche"
            className="input-hidden"
            onChange={() => this.handleRadioButton("porsche")}
          />
          <label for="porsche">
            <p className="imageDesc">2 Door Porsche</p>
            <img
              src={porsche}
              alt="Medium paint defect"
              className="paintImage"
            />
          </label>

          <input
            type="radio"
            name="paint"
            id="tesla"
            className="input-hidden"
            onChange={() => this.handleRadioButton("tesla")}
          />
          <label for="tesla">
            <p className="imageDesc">Tesla</p>
            <img src={tesla} alt="High paint defect" className="paintImage" />
          </label>

          <input
            type="radio"
            name="paint"
            id="truck"
            className="input-hidden"
            onChange={() => this.handleRadioButton("truck")}
          />
          <label for="truck">
            <p className="imageDesc">4 Door Truck</p>
            <img src={truck} alt="High paint defect" className="paintImage" />
          </label>

          <input
            type="radio"
            name="paint"
            id="van"
            className="input-hidden"
            onChange={() => this.handleRadioButton("passengerVan")}
          />
          <label for="van">
            <p className="imageDesc">Passenger Van</p>
            <img src={van} alt="High paint defect" className="paintImage" />
          </label>
          <div className="divider"></div>
        </div>
      </div>
    );
  }

  renderSwitch(param) {
    switch (param) {
      case 1:
        return <this.getCarSizeQ />;
      case 2:
        return <this.getCarPaintQ />;
      default:
        return "hello";
    }
  }

  render() {
    return (
      <Provider store={store}>
        <Link to="/">
          <img className="logoImage" src={logo} alt="logo"></img>
        </Link>
   
        {this.renderSwitch(this.state.question)}
        
        {this.state.question > 1 && (
          <button
            type="button"
            className="btn btn-primary mx-auto"
            onClick={() => {
              this.changeQuestion(-1);
            }}
          >
            Back
          </button>
        )}

        <button
          disabled={this.state.vehicleSize.length === 0}
          type="button"
          className="btn btn-primary mx-auto"
          onClick={() => {
            this.changeQuestion(1);
          }}
        >
          Next
        </button>
      </Provider>
    );
  }

>Solution :

You need to bind this for getCarSizeQ. This can be done automatically with a class field.

getCarSizeQ = () => {
    return ...
};

However, it is better to make it a separate component with a capital name.