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?