Why am I receiving this error: TypeError: this.props.handleUpdatePrice is not a function … it points to line 39 on my Coin.js file. I’ll link all of the relevant contracts below.
App.js inherits Coinlist, which inherits Coin… so that’s how App.js communicates with the Coin contract
I have literally copied Zolt’s code verbatim, but I cannot get the “update price” button to properly work. Here is my main App.js file
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,
showBalance: true,
coinData: [
{ name: "Bitcoin",
ticker: "BTC",
balance: 0.5,
price: 34000 },
{ name: "Ethereum",
ticker: "ETH",
balance: 5,
price: 2100
},
{name: "Cardano",
ticker: "ADA",
balance: 5000,
price: 1.25
},
{name: "USDC",
ticker: "USDC",
balance: 2500,
price: "1.00"
},
]
}
this.handleUpdatePrice = this.handleUpdatePrice.bind(this);
this.balanceVisibility = this.balanceVisibility.bind(this);
}
balanceVisibility(){
this.setState(function(oldState){
return{
...oldState,
showBalance: !oldState.showBalance
}});
}
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 {
ticker,
name,
price: newPrice
}
});
this.setState({coinData : newCoinPrice});
}
render(){
return (
<Div>
<ExchangeHeader/>
<AccountBalance
amount= {this.state.balance}
showBalance={this.state.showBalance}
balanceVisibility= {this.balanceVisibility}/>
<CoinList
coinData= {this.state.coinData}
showBalance = {this.state.showBalance}
handleUpdatePrice={this.state.handleUpdatePrice}/>
</Div>
);
}
}
export default App;
Here is the Coin file. In the handleClick(event) is where the error message will say “this.props. handleUpdatePrice is not a function.”
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.props.handleUpdatePrice(this.props.ticker);
}
render() {
return (
<tr>
<TD>{this.props.name}</TD>
<TD>{this.props.ticker}</TD>
<TD>{this.props.price}</TD>
{this.props.showBalance ? <TD>{this.props.balance}</TD> : <TD>***</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,
price: PropTypes.number,
}
export default Coin;
