finally I need to code more
App.js
handleRefreshBalance(){
this.setState(function({name, ticker, price,balance, showBalance}){
return {
name,
ticker,
price,
balance,
showBalance: !showBalance
}
})
}
render() {
return (
<>
<ExchangeHeader/>
<AccountBalance amount = {this.state.balance} showBalance = {this.state.showBalance}
handleRefreshBalance = {this.handleRefreshBalance}/>
<CoinList coinData ={this.state.coinData} handleRefresh = {this.handleRefresh}
showBalance = {this.state.showBalance}/>
</>
)
}
}
CoinList.jsx
import React, { Component } from 'react'
import Coin from '../Coin/Coin';
export default class CoinList extends Component {
render() {
return (
<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Ticker</th>
<th>Price</th>
{this.props.showBalance ? <th>Balance</th> : null}
<th>Update</th>
</tr>
</thead>
<tbody >
{
this.props.coinData.map(({name, ticker, price, balance}) => <Coin key = {ticker}
handleRefresh = {this.props.handleRefresh}
name = {name}
ticker = {ticker}
price = {price}
balance = {balance}
showBalance = {this.props.showBalance}/>)
}
</tbody>
</table>
</div>
)
}
}
Coin.jsx
export default class Coin extends Component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
event.preventDefault();
this.props.handleRefresh(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> : null }
<Td>
<form action = "#" method = "POST"/>
<button onClick={this.handleClick }>Refresh</button>
</Td>
</Tr>
);
}
}
AccountBalance.jsx
export default class AccountBalance extends Component {
render() {
const buttonText = this.props.showBalance ? 'HideBalance' : 'ShowBalance';
const amountText = this.props.showBalance ? `Amount = ${this.props.amount}` : ' ';
return (
<Section>
<p>{amountText}</p>
<button onClick = {this.props.handleRefreshBalance} >{buttonText}</button>
</Section>
)
}
}
