Почему TypeError: this.props.addProduct is not a function?

Question

Roar-it @Roar-it

React

Почему TypeError: this.props.addProduct is not a function?

APP.js

import React from "react";
import Header from "./Header";
import Cart from "./Cart";
import AdminPanel from "./AdminPanel";

class App extends React.Component {
  state = {
    products: {},
    cart: {},
  };

  addProduct = (product) => {
    // 1. Делаем копию объекта state
    const products = { ...this.state.products };
    // 2. Добавить новый продукт в переменную products
    products[`product${Date.now()}`] = product;
    // 3. Записать наш новый объект products в state
    this.setState({ products });
  };

  render() {
    return (
      <div className="technomart">
        <div className="marketplace">
          <Header title="Google Store" />
        </div>
        <Cart />
        <AdminPanel addProduct={this.addProduct} />
      </div>
    );
  }
}

export default App;

AdminPanel.js

import React from "react";
import AddProductForm from "./AddProductForm";

class AdminPanel extends React.Component {
  render() {
    return (
      <div className="admin-panel">
        <div className="admin-panel__header">
          <div className="admin-panel__wrapper">
            <h2 className="title-h2">Редактор товаров:</h2>
          </div>
        </div>
        <AddProductForm AddProduct={this.props.addProduct} />
      </div>
    );
  }
}

export default AdminPanel;

AddProductForm.js

import React from "react";

class AddProductForm extends React.Component {
  nameRef = React.createRef();
  priceRef = React.createRef();
  statusRef = React.createRef();
  descRef = React.createRef();
  imgRef = React.createRef();

  createProduct = (event) => {
    event.preventDefault();
    const product = {
      name: this.nameRef.current.value,
      price: parseFloat(this.priceRef.current.value || 0),
      status: this.statusRef.current.value,
      desc: this.descRef.current.value,
      img: this.imgRef.current.value,
    };
    this.props.addProduct(product);
  };
  render() {
    return (
      <form className="product-form" onSubmit={this.createProduct}>
        <div className="product-form__wrapper">
          <input
            className="product-form__item product-form__name"
            ref={this.nameRef}
            name="name"
            type="text"
            placeholder="Name"
            autoComplete="off"
          />
          <div className="product-form__group">
            <input
              className="product-form__item product-form__price"
              ref={this.priceRef}
              name="price"
              type="text"
              placeholder="Price"
              autoComplete="off"
            />
            <select
              className="product-form__item product-form__status"
              ref={this.statusRef}
              name="status"
            >
              <option value="available">Доступна</option>
              <option value="unavailable">Убрать с полок</option>
            </select>
          </div>
          <textarea
            className="product-form__item product-form__desc"
            ref={this.descRef}
            name="desc"
            placeholder="Desc"
          />
          <input
            className="product-form__item product-form__img"
            ref={this.imgRef}
            name="img"
            type="text"
            placeholder="Img"
            autoComplete="off"
          />
          <button className="button" type="submit">
            Добавить
          </button>
        </div>
      </form>
    );
  }
}

export default AddProductForm;