That was a lot to learn and still there is more. Safe to say, my app is working as it should, but if any other suggestions/recommendations can be given, I’m all ears 
App.js
import React from 'react';
import AccountBalance from './components/AccountBalance/AccountBalance';
import CoinList from './components/CoinList/CoinList';
import TitleList from './components/TitleList/TitleList';
import styled from 'styled-components';
const Div = styled.div`
text-align: center;
background-color: rgb(20, 56, 97);
color: #cccccc;
`;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
balance: 10000,
showBalance: true,
coinData: [
{
name: 'Bitcoin',
ticker: 'BTC',
balance: 0.5,
price: 42050.77
},
{
name: 'Ethereum',
ticker: 'ETH',
balance: 32,
price: 3129.90
},
{
name: 'Tether',
ticker: 'USDT',
balance: 15000,
price: 1.0
},
{
name: 'Solana',
ticker: 'SOL',
balance: 50,
price: 121.50
},
{
name: 'Crypto.com',
ticker: 'CRO',
balance: 359801,
price: 0.34
}
]
}
this.handleRefresh = this.handleRefresh.bind(this);
this.handleShowBalance = this.handleShowBalance.bind(this);
}
handleRefresh(valueChangeTicker) {
const newCoinData = this.state.coinData.map(function( {ticker, name, price} ) {
let newPrice = price;
if (valueChangeTicker === ticker) {
const randomPercentage = 0.995 + Math.random() * 0.01;
newPrice = newPrice * randomPercentage;
}
return {
ticker,
name,
price: newPrice
}
});
this.setState({ coinData: newCoinData });
}
handleShowBalance() {
this.setState({ showBalance: !this.state.showBalance });
}
render() {
return (
<Div>
<TitleList />
<AccountBalance amount={this.state.balance}
showBalance={this.state.showBalance}
handleShowBalance={this.handleShowBalance} />
<CoinList coinData={this.state.coinData}
handleRefresh={this.handleRefresh}
showBalance={this.state.showBalance} />
</Div>
);
}
}
export default App;
CoinList.js
import React, { Component } from 'react';
import Coin from '../coin/Coin';
import styled from 'styled-components';
const Table = styled.table`
margin: 50px auto 50px auto;
display: inline-block;
font-size: 1.4rem;
`;
export default class CoinList extends Component {
render() {
return (
<Table>
<thead>
<tr>
<th>Name</th>
<th>Ticker</th>
<th>Price</th>
<th>Balance</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{
this.props.coinData.map( ({name, ticker, balance, price}) =>
<Coin key={ticker}
handleRefresh={this.props.handleRefresh}
name={name}
ticker={ticker}
balance={balance}
showBalance={this.props.showBalance}
price={price} />
)
}
</tbody>
</Table>
)
}
}
Coin.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const CoinTd = styled.td`
border: 1px solid #cccccc;
width: 25vh;
`;
export default class Coin extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
//prevent the default action of submitting the form
event.preventDefault();
this.props.handleRefresh(this.props.ticker);
}
render() {
const changeBalance = this.props.showBalance ? <CoinTd>{this.props.balance}</CoinTd> : "*****";
return (
<tr>
<CoinTd>{this.props.name}</CoinTd>
<CoinTd>{this.props.ticker}</CoinTd>
<CoinTd>${this.props.price}</CoinTd>
{changeBalance}
<CoinTd>
<form action='#' method='POST'>
<button onClick={this.handleClick}>Refresh</button>
</form>
</CoinTd>
</tr>
);
}
}
Coin.propTypes = {
name: PropTypes.string.isRequired,
ticker: PropTypes.string.isRequired,
price: PropTypes.number.isRequired,
balance: PropTypes.number.isRequired
}
AccountBalance.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const Section = styled.section`
font-size: 2rem;
text-align: left;
padding: 1.5rem 0 1.5rem 5rem;
color: aliceblue;
`;
const Button = styled.button`
font-size: 1.3rem;
margin: 1.5rem 0 1.5rem 5rem;
background-color: light-gray;
border: 1px solid black;
border-radius: 5px;
`;
export default class AccountBalance extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
event.preventDefault();
this.props.handleShowBalance();
}
render() {
const buttonText = this.props.showBalance ? "Hide Balance" : "Show Balance";
const balance = this.props.showBalance ? <span><strong>Balance:</strong> ${ this.props.amount }</span> : "*****";
return (
<Section>
{ balance }
<Button onClick={this.handleClick}>{ buttonText }</Button>
</Section>
);
}
}
AccountBalance.propTypes = {
amount: PropTypes.number.isRequired
}
