TypeError... a function I created isn't getting seen

Been working on this for an hour and i give up… the error I’m geeting is:

TypeError: this.handleUpdatePrice is not a function

  35 | handleClick(event){
  36 |   event.preventDefault();
  37 | 
> 38 |   this.handleUpdatePrice(this.props.ticker);
  39 |
  40 | 

This is exactly how Zsolt’s code is… but for some reason mine is behaving different. My code loads the main page, then when I hit the “update price” button, it sends me to this error code.

Here is my Coin.js file

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const TD = styled.td`
  border: 1px solid #E6EAFF;
  width: 15vh;
`


class Coin extends Component {
  constructor (props){
    super(props);
    //.bind helps us bind the handleClick function that's outside of this constructor
    //into what's inside the constructor, access properties & set a new value (in this case, price)
    this.handleClick = this.handleClick.bind(this);
  }
  /*componentDidMount(){
    const callback = () => {
      const randomPercent = 0.995 + Math.random() * 0.01;
      //can't set this.state.price because it's already initialized
      //we use another function called 'this.setState' that inherently accesses current state and can re-initialize this.state
      //follow format below
      this.setState(({coinData : price}){
        //return the price as the object that it already is
        return {
          price: (price * randomPercent).toFixed(2)
        };
      });
    }
    //now, we use the callback we created
    setInterval(callback, 5000);
  } */

  handleClick(event){
    event.preventDefault();

    this.handleUpdatePrice(this.props.ticker);
  }

  render() {
    return (
      <tr>
        <TD>{this.props.name}</TD>
        <TD>{this.props.ticker}</TD>
        <TD>${this.props.price}</TD>
        <TD>
          <form action = "#" method = "POST">
            <button onClick = {this.handleClick}>Update Price</button>
          </form>
        </TD>
      </tr>
    );
  }
}

Coin.propTypes = {
  name: PropTypes.string.isRequired,
  ticker: PropTypes.string.isRequired,
  price: PropTypes.number,
}

export default Coin;

And here is my main App.js

import React from 'react';
import AccountBalance from './components/AccountBalance/AccountBalance';
import CoinList from './components/CoinList/CoinList';
import ExchangeHeader from './components/ExchangeHeader/ExchangeHeader';
import styled from 'styled-components';

const Div = styled.div`
  text-align: center;
  background-color: #440066;
  color: #E6EAFF;
  `

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      balance: 10000,
      coinData: [
        { name: "Bitcoin",
          ticker: "BTC",
          price: 34000 },
        { name: "Ethereum",
          ticker: "ETH",
          price: 2100
        },
        {name: "Cardano",
          ticker: "ADA",
          price: 1.25
        },
        {name: "USDC",
          ticker: "USDC",
          price: "1.00"
        },
      ]
    }
    this.handleUpdatePrice = this.handleUpdatePrice.bind(this);

  }

  handleUpdatePrice(valueTicker){
    const newCoinPrice = this.state.coinData.map(function({ticker, name, price}) {
      let newPrice = price;
      if(valueTicker === ticker){
        const randomPercent = 0.995 + Math.random() * 0.01;
        newPrice = (newPrice * randomPercent).toFixed(2);
      }
    return {
      name,
      ticker,
      price: newPrice
    }
  });
  this.setState({coinData : newCoinPrice});
}

  render(){
    return (
      <Div>
          <ExchangeHeader/>
          <AccountBalance amount= {this.state.balance}/>
          <CoinList coinData= {this.state.coinData} handleUpdatePrice ={this.handleUpdatePrice}/>
      </Div>
    );
  }
}

export default App;

Can someone help? :frowning: