Calling a parent component's function from a child component in react

I am attempting to update a state in the parent class based on a change that occurs in the child class, but I can't seem to get it to work. It compiles without a problem, but when I hit the + button, I get a message "TypeError: this.props.onQuantityChanged is not a function"

Here's what I have:

Parent class:

import React, { Component } from "react";
import QuantityPicker from "./quantityPicker";

class Product extends Component {
  state = {
    quantity: 1,
  };

  render() {
    return (
       <label>Price Each: $500</label>
       <label>Total Price: ${500 * this.state.quantity}</label>

       <QuantityPicker onQuantityChanged={this.OnQuantityChanged}></QuantityPicker>
    );
  }

  onQuantityChanged = (newQuantity) => {
    this.setState({ quantity: newQuantity });
  };
}
export default Product;

Child Class:

import React, { Component } from "react";

class QuantityPicker extends Component {
  state = {
    quantity: 1,
  };

  render() {
    return (  <button onClick={this.increaseQuantity}>+</button>  );
  }

  increaseQuantity = () => {
    this.setState({ quantity: this.state.quantity + 1 });
    this.props.onQuantityChanged(this.state.quantity);
  };
}
export default QuantityPicker;

Thanks in advance for any insight.

from Recent Questions - Stack Overflow https://ift.tt/3utUM1C
https://ift.tt/eA8V8J