This.state is undefined ??

Question

JavaScript

Good evening, dear, such a dumbass .... I pass the changeactive method through props from the HeaderSLider.jsx component to slider.jsx, but when it is called on onclick on the input inside slider.jsx, I get an error and writes that TypeError: Cannot read property ' slides' of undefined
changeActive
D:/React/tandor/src/Components/HeaderSlider/HeaderSlider.jsx:45
42 | debugger;
43 | e.preventDefault();
44 |
> 45 | const list = this.state.slides.map((el) => {
| ^ 46 | return { ...el, active: el.id === id ? true : false };
47 | });
48 | this.setState({

what's the problem? why doesn't it see the state? thanks in advance...

HeaderSlider.jsx code ->

import React from "react";
import classList from "./HeaderSlider.module.css";

import Slider from "../Slider/Slider";

class HeaderSlider extends React.Component {
  state = {
    slides: [
      {
        id: 1,
        serviceName: "Бухгалтерские услуги в Санкт-Петербурге",
        buttonText: "Наша презентация",
        active: true,
        type: "radio",
      },
      {
        id: 2,
        serviceName: "Юридические услуги в Москве",
        buttonText: "Наша презентация",
        active: false,
        type: "radio",
      },
      {
        id: 3,
        serviceName: "Занятие по кикбоксингу в Ярославле",
        buttonText: "Наша презентация",
        active: false,
        type: "radio",
      },
      {
        id: 4,
        serviceName: "Онлайн клуб в Краснодаре = заря",
        buttonText: "Наша презентация",
        active: false,
        type: "radio",
      },
    ],
    isActive: 1,
  };

  changeActive(e, id) {
    debugger;
    e.preventDefault();

    const list = this.state.slides.map((el) => {
      return { ...el, active: el.id === id ? true : false };
    });
    this.setState({
      ...this.state,
      slides: list,
      isActive: id,
    });
  }

  render() {
    return (
      <div className={classList.header__slider}>
        {this.state.slides
          .filter((el) => el.id === this.state.isActive)
          .map((el) => (
            <div key={el.id}>
              <h1>{el.serviceName}</h1>
              <button>{el.buttonText}</button>
            </div>
          ))}
        <Slider
          isActive={this.state.isActive}
          changeActive={this.changeActive}
          slides={this.state.slides}
        />
      </div>
    );
  }
}

export default HeaderSlider;

slider.jsx code ->

//made repository

import React from "react";
import classList from "./Slider.module.css";

const radioActive = classList.slider__radio__active;

class Slider extends React.Component {
  state = {};

  render() {
    return (
      <div className={classList.slider__container}>
        <div className={classList.slider__inputs}>
          {this.props.slides.map((el) => (
            <input
              key={el.id}
              onClick={(e) => this.props.changeActive(e, el.id)}
              type={el.type}
              className={el.active ? radioActive : null}
            />
          ))}
        </div>
        <div className={classList.slider__buttons}>
          <div className={classList.slider__button_left}>
            <p> {"<"} </p>
          </div>
          <div className={classList.slider__button_right}>
            <p> {">"}</p>
          </div>
        </div>
      </div>
    );
  }
}

export default Slider;