Coding exercise - Rewrite the CoinList

React Web Development Course
#41

Here’s my Assignment

CoinList.jsx 
import React from 'react';
import Coin from '../Coin/Coin';
import styled from 'styled-components';

const TitleDetails = styled.th`
    border: 2px solid burlywood;
    width: 25vh;
    background-color: black;
    color: white;
`;

const Table = styled.table`
    margin: 20px auto 20px auto;
    display: inline-block;
    font-size: 1.5rem;
`;

export default function CoinList(props) {
    return (
        <Table>
        <thead>
            <tr>
            <TitleDetails>Name</TitleDetails>
            <TitleDetails>Ticker</TitleDetails>
            <TitleDetails>Price</TitleDetails>
            {props.showBalance ?
                <TitleDetails>Balance</TitleDetails> : null}
            <TitleDetails>Actions</TitleDetails>
            </tr>
        </thead>
        <tbody>
            {
            props.coinData.map(({key, name, ticker, price, balance}) =>
                <Coin key={key}
                handleRefresh = {props.handleRefresh} 
                name={name} 
                ticker={ticker} 
                price={price}
                balance = {balance}
                showBalance={props.showBalance}
                />
                )
            }
        </tbody>
        </Table>
    )
}
AccountBalance.jsx 
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Section1 = styled.section`
    margin: auto;
    box-shadow: 2px 2px 7px 1px black;
    background-color: rgb(253, 239, 218);
    float: center;
    font-size: 1.5rem;
    box-sizing: content-box;
    font-weight: bold;
`;

export default function AccountBalance(props) {
    const buttonText = props.showBalance ? 'Hide Balance' : 'Show Balance';

    let balance = props.showBalance ?
    <>Current Balance is: ${props.amount}</>
    : null

    return (
        <Section1 className = "balance">
            {balance}
            <button onClick = {props.handleBalance}>{buttonText}</button>
        </Section1>
    );
}

AccountBalance.propTypes = {
    amount: PropTypes.number.isRequired
}
AppHeader.jsx 
import React from 'react';
import logo from './logo.svg';
import styled from 'styled-components';

const Header = styled.header`
    background-color: #030011;
    min-height: 20vh;
    display: flex;
    flex-direction: column;
    align-items: inherit;
    justify-content: flex-start;
    color: white;
`;

const H1 = styled.h1`
    font-size: 4rem;
    font-style: oblique;
    font-family: Georgia, 'Times New Roman', Times, serif;
`;

const P = styled.p`
    font-size: 1.5rem;
    font-style: normal;
    font-family: 'Lucida Sans Regul';
`;

const Image = styled.img`
    height: 20vmin;
    pointer-events: none;
`;

export default function Appheader() {
    return (
        <Header>
        <Image src={logo} alt="React logo" />
        <H1>
            Coin Exchange
        </H1>
        <P className = "App-subtitle">
            by: Xyz Fiegalan
        </P>
        </Header>
    );
}
2 Likes
#42

Here’s my solution.
No need to put import {React} from "react" in the latest version.

CoinList.jsx 
import Coin from './Coin';
import styled from 'styled-components';

const Table = styled.table` 
  margin: 50px auto 50px auto;
  display: inline-block;
  font-size: 1.4rem;
`;

function CoinList(props){
  return (
    <Table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Ticker</th>
          <th>Price</th>
          <th>Balance</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {props.coinData.map(({ key, name, ticker, price, balance }) => (
          <Coin key={key} handleRefresh={props.handleRefresh} name={name} balance={props.showBalance ? balance : "*****"} ticker={ticker} price={price} coinId={key}/>
        ))}
      </tbody>
    </Table>
  );
}

export default CoinList;
AccountBalance.jsx 
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;
`;

function AccountBalance(props){
  const buttonText = props.showBalance ? 'Hide Balance' : 'Show Balance';
  const balanceDisplay = props.showBalance ? props.amount : "*****";

  return (
    <Section>
      Balance: ${balanceDisplay}
      <button onClick={props.handleVisibility}>{buttonText}</button>
    </Section>
  );
}

AccountBalance.propTypes = {
  amount: PropTypes.number.isRequired
}

export default AccountBalance;
2 Likes
#43

CoinList.jsx

const CoinList  = ({coinData,refresh,showBalance}) =>{
        return (
            <CoinTable >
                <thead>
                    <tr>
                    <Th>Ticker</Th>
                    <Th>Name</Th>
                    <Th>Price</Th>
                    {showBalance ? <Th>Balance</Th> : null}
                    <Th>Action</Th>
                    </tr>
                </thead>
                <tbody>
                    {coinData.map( ({key,name,ticker,price,balance}) => 
                    <Coin 
                       key = {key} 
                       id = {key}
                       name = {name} 
                       ticker = {ticker} 
                       price = {price} 
                       balance = {balance}
                       refresh = {refresh}
                       showBalance = {showBalance}
                    />
                    )
                    }
                </tbody>
        </CoinTable>
    )
}
export default CoinList;

AccountBalance.jsx

const AccountBalance  = ({amount,showBalance,handleDisplay}) =>{
    const buttonText = showBalance ? 'Hide Balance':'Show Balance';
    let content = "";
    if(showBalance){
        content = <Span>Account Balance: ${amount}</Span>
    }
    return (
        <Section >
            {content}
            <button onClick = {handleDisplay}>{buttonText}</button>
        </Section>
    );
}
AccountBalance.propTypes = {
    amount: PropTypes.number.isRequired
};
export default AccountBalance;

Header.jsx

const Header = ({title}) => {
        return (
            <AppHeader>
                <Img src={logo} className="App-logo" alt="logo" />
                <H1>
                   {title}
                </H1>
            </AppHeader>
        );
}
export default Header;
2 Likes
#44 
export default function AccountBalance (props) {
    
    const handleClick = (event) => {
        //Prevent the default action of submitting the form
        event.preventDefault();
        props.handleShowBalance(!props.showBalance);
    };
    const buttonText = props.showBalance ? 'Hide Balance' : 'Show Balance';
    let content = null;
    if (props.showBalance){
        content = <>Balance: ${props.amount}</>
    }
    return (
        <Section>
        {content}
        <button onClick={handleClick}> {buttonText}</button>
        </Section>
        
    );
}

export default function CoinList(props) {
        return (
            <Table className="coin-table">
      <thead>
        <tr>
          <th>NAME</th>
          <th>TICKER</th>
          <th>PRICE</th>
          {props.showBalance ? <th>BALANCE</th> : <th>***</th>}
          <th>ACTION</th>
        </tr> 
      </thead>
      <tbody>
        {
          props.coinData.map( ({key,name,ticker,price,balance}) => 
          <Coin 
                key= {key} 
                id={key}
                handleRefresh = {props.handleRefresh}
                name = {name} 
                ticker = {ticker} 
                showBalance = {props.showBalance}
                price={price}
                balance = {balance}/>
          )
        }
      </tbody>
      </Table>
        );
}
2 Likes
#45

Coinlist
import react from ‘React’
export deafult function Coinlist(props)
Delete all >“this.” from your code

Accountbalance
import react from ‘React’
export deafult function Accountbalance(props)
Delete all >“this.” from your code

1 Like
#46

CoinList.jsx

import React 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 function CoinList(props) {
    return (
    <Table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Ticker</th>
            <th>Price</th>
            {props.showBalance ? <th>Balance</th> : null}
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {
        props.coinData.map( ({key, name, ticker, price, balance}) => 
        <Coin key={key}
                handleRefresh={props.handleRefresh}
                name={name} 
                ticker={ticker}
                showBalance={props.showBalance}
                balance={balance} 
                price={price}
                tickerId={key}/>
        )
        }
        
            
    </tbody>
    </Table>
    )

}

**AccountBalance.jsx**

import React 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;
`;

export default function AccountBalance(props) {
    const buttonText = props.showBalance ? "Hide Balance" : "Show Balance";
    let content = null;
    if (props.showBalance) {
        content = <>Balance: ${props.amount}</>
    }
    return (
        <Section>
            {content}   
            <button onClick={props.handleBalanceVisibilityChange}>{buttonText}</button>
        </Section>
    );
    
}




AccountBalance.propTypes = {
    amount: PropTypes.number.isRequired
}
2 Likes
#47

Far out I love hooks so much more than class-based.

Feels like taking a warm bath after camping in the cold for the last week :lips:

Now after such a comment, I hope I haven’t minced the conversion bc that would be awkies.

CoinList.jsx

import React from 'react';
import Coin from '../Coin/Coin';
import styled from 'styled-components';

const CoinTable = styled.table`
  margin: 50px auto 50px auto;
  display: inline-block;
  font-size: 1.4rem;
`

export default function CoinList(props) {
        return (
                <CoinTable>
                <thead>
                    <tr>
                    <th>Name</th>
                    <th>Ticker</th>
                    <th>Price</th>
                    {props.showBalance ? <th>Balance</th> : null}
                    <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {
                    props.coinData.map(value =>
                    <Coin   key = {value.key}
                            handleRefresh = {props.handleRefresh}
                            name = {value.name}
                            ticker = {value.ticker}
                            balance = {value.balance}
                            showBalance = {props.showBalance}
                            price = {value.price}
                            tickerId = {value.key}/>
                        )
                    }
                </tbody>
                </CoinTable>
        )
}

AccountBalance.jsx

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components'

const Section = styled.section`
    font-size: 1.5rem;
    background: transparent;
    border-radius: 3px;
    border: 2px solid palevioletred;
    color: palevioletred;
    margin: 0 1em;
    padding: 0.25em 1em;
`;

const ButtonBalance = styled.button`
    background: navy;
    border-radius: 3px;
    border: 2px solid palevioletred;
    color: palevioletred;
    margin: 0 1em;
    padding: 0.25em 1em;
`;

export default function AccountBalance(props) {
        const buttonText = props.showBalance ? "Hide Balance" : "Show Balance";
        let content = null;
        if (props.showBalance) {
            content = <>Balance: ${props.amount}</>
        }
        let balance = props.showBalance ? <span>Balance: ${props.amount}</span> : null;
        return (
            <Section>
                {content}
                <ButtonBalance onClick={props.handleToggleShowBalance}>{buttonText}</ButtonBalance>
            </Section>
        );
}

AccountBalance.propTypes = {
    amount: PropTypes.number.isRequired
}
1 Like
#48

CoinList.jsx:

import React from 'react'
import Coin from '../Coin/Coin';

export default function CoinList(props) {
  return (
      <table className="coin-table">
      <thead>
          <tr><th>Name</th><th>Ticker</th><th>Price</th>
          <th style={{display:props.showBalance ? 'block' : 'none'}}>Balance</th>
          <th>Action</th></tr>
      </thead>
      <tbody>
        {
          props.coinData.map( ({key, name, ticker, price, balance}) => 
            <Coin key={key} 
            doCoinRefresh={props.doCoinRefresh}
            showBalance={props.showBalance}
            name={name} ticker={ticker} balance={balance} price={price} />
          )
        }
      </tbody>
    </table>
    );
}

AccountBalance.jsx:

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const DivAccountBalance = styled.div`
    text-align: center;
`;

const SectionAccountBalance = styled.section`
    display: inline-block;
    font-size: 2rem;
    text-align: center;
    padding: 1rem 1rem 1.5rem 1rem;
    border: 2px solid grey;
`;

export default function AccountBalance(props) {
    const btnBalanceDisplay = (event) => {
        event.preventDefault();
        props.doBalanceDisplay(!props.showBalance);
    }

    const btnText = (props.showBalance ? 'Hide' : 'Show') + ' balance';
    return (
        <DivAccountBalance>
            <SectionAccountBalance>
                <span style={{display:props.showBalance ? 'flex' : 'none'}}>Accountbalance: ${props.amount}</span>
                <button onClick={btnBalanceDisplay}>{btnText}</button>
            </SectionAccountBalance>
        </DivAccountBalance>
    );
}

AccountBalance.propTypes = {
    amount: PropTypes.number.isRequired
}
1 Like
#49

CoinList:

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 function CoinList(props) {

    return (
        <Table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Ticker</th>
                    <th>Price</th>
                    {props.showBalance ? <th>Balance</th> : null}
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {
                    props.coinData.map(({ key, name, ticker, price, balance }) =>
                        <Coin
                            key={key}
                            handleRefresh={props.handleRefresh}
                            name={name}
                            ticker={ticker}
                            showBalance={props.showBalance}
                            balance={balance}
                            price={price}
                            tickerId={key}
                        />
                    )
                }
            </tbody>
        </Table>
    )

}

AccountBalance:

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Section = styled.section`
    font-size: 2rem;
    text-align: ledft;
    padding: 1.5rem 0 1.5rem 5rem;
`;

export default function AccountBalance(props) {

    const buttonText = props.showBalance ? 'Hide Balance' : 'Show Balance';
    let content = null;
    if (props.showBalance) {
        content = <>Balance: ${props.amount}</>;
    }
    return (
        <Section>
            {content}
            <button onClick={props.handleBalanceVisibilityChange}>{buttonText}</button>
        </Section>
    );

}

AccountBalance.propTypes = {
    amount: PropTypes.number.isRequired
}
1 Like
#50

Coding Exercise - Rewrite the CoinList

Coin.jsx

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';



const Button = styled.button`
   background: black;
   border-radius: 3px;
   border: 2px solid darkgrey;
   color: white;
   margin: 0 1em;
   padding: 0.25em 1em;
  
    `;


    const Td = styled.td`
       border: 1px solid black;
       background-color: lightgrey;
       width: 25vh; 
    `;


export default function Coin(props){


  const handleClick = (Event) => {
       Event.preventDefault();

       props.handleRefresh(props.tickerId);
   }
        return (
            <tr>
                <Td>{props.name}</Td>
                <Td>{props.ticker}</Td>
                <Td>${props.price}</Td>
                {props.showBalance ? <Td>{props.balance}</Td> : null}<Td>
                    <form action="#" method="POST">
                        <Button onClick={handleClick}>Refresh</Button>
                    </form>
                </Td>
            </tr>
        );
}
//type checking.
Coin.propTypes = {
    name: PropTypes.string.isRequired,
    ticker: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired,
    balance: PropTypes.number.isRequired
}

CoinList.jsx

import React from 'react';
import styled from 'styled-components';
import Coin from '../Coin/Coin.jsx';
import { v4 as uuidv4 } from 'uuid';


const Table = styled.table`

    margin: 50px auto 50px 250px;
    display: inline-block;
    font-size: 1.2rem;

    `;

export default function CoinList(props){

        return(
            <Table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Ticker</th>
                        <th>Price</th>
                       {props.showBalance ? <th>Balance</th> : null }
                    </tr>
                </thead>
                <tbody>
                    {
                        props.coinData.map( ({ key, name, ticker, price, balance}) => 
                        <Coin 
                            key={uuidv4()}
                            handleRefresh={props.handleRefresh}
                            name={name} 
                            ticker={ticker}
                            showBalance={props.showBalance}
                            balance={balance} 
                            price={price}
                            tickerId={key}
                          />)
                    }

                </tbody>
            </Table>
        );
    
}

AccountBalance.jsx

import React from 'react';
import PropTypes from 'prop-types';

import styled from 'styled-components';

const Section = styled.section `
    text-align: left;
    font-size: 2rem;
    padding: 1.5rem 0 1.5rem 5rem;
`;

const Button = styled.button`
   background: black;
   border-radius: 3px;
   border: 2px solid darkgrey;
   color: white;
   margin: 0 1em;
   padding: 0.25em 1em;
  
    `;

export default function AccountBalance(props){

    
        const buttonText = props.showBalance ? 'Hide Balance' : 'Show Balance'
        let balanceData = null;
        if(props.showBalance)
        {
           balanceData =  <>Balance: ${ props.amount }</>
        }
        return (
            <Section>
                {balanceData}
                <form action="#" method="POST">
                    <Button onClick={props.handleBalanceVisability}>{buttonText}</Button>
                </form>
            </Section>
        
        );
    
}


AccountBalance.propTypes = {

    amount: PropTypes.number.isRequired
}
1 Like
#51

This one was pretty simple, just a matter of removing the Class, the Render, and this. and changing the class to a function. If I can be candid I still feel like I dont have a firm grasp on how class based components operate start to finish but the functional based components seem to be a lot easier to understand.

1 Like
#52 
export default function CoinList (props) {

        return (
            <Table className="coin-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Ticker</th>
                    <th>Price</th>
                    {props.showBalance ? <th>Balance</th> : null}
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
              {
                props.coinData.map(value => 
                <Coin key={value.ticker} 
                    name={value.name} 
                    handleRefresh={props.handleRefresh}
                    ticker={value.ticker} 
                    price={value.price}
                    balance={value.balance}
                    showBalance={props.showBalance}/>
                )
              }
            </tbody>
        </Table>
        )  
}

export default function AccountBalance (props) {
   
        const buttonText = props.showBalance ? 'Hide Balance' : 'Show Balance';
        const balanceValue = props.showBalance ? `Balance: ${props.amount}` : null;
        return (
            
            <Section className="amount">
                <button onClick={props.toggleBalance}>{buttonText}</button>
                <div>{balanceValue}</div>           
            </Section>
            
            
        );
}
1 Like
#53

Coin.jsx


import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Td = styled.td`; 
  border; 1px solid black; 
  width; 25vh; 
  `;

 export default function Coin(props) {
  
const handleClick = (event) => {
   //Prevent the default action of submitting the form 
   event.preventDefault();
   
   props.handleRefresh(props.tickerId);
  }

  return (
    <tr>
        <Td>{props.name}</Td>
        <Td>{props.ticker}</Td>
        <Td>${props.price}</Td>
        {props.showBalance ? <Td>{props.balance}</Td> : null }
        <Td>
            <form action="#" method= "POST">
              <button onClick={handleClick}>Refresh</button>
              </form>
              </Td>
              </tr>
                
            );
    }


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

CoinList.jsx

type or paste code here
import React 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 function Coinlist(props) {

return ( 
  <Table>
<head>
  <tr>
      <th>Name</th>
      <th>Ticker</th>
      <th>Price</th>
      {this.props.showBalance ? <th>Balance</th> : null }
      <th>Actions</th>
      </tr>
  </head>
  <tbody>
      {
        props.coinData.map( ({key, name, ticker, balance, price}) =>
          <Coin key={key} 
            handleRefresh={props.handleRefresh}
            name={name} 
            ticker={ticker} 
            balance={balance}
            showBalance={props.showBalance}
            price={price}
            tickerId={key} />
          )
        }
      </tbody>
      </Table>
      

 )
}

AccountBalance.jsx

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Section = styled.section`
    boder: 1px solid red;
    font-size: 2rem;
    text-aligh: left;
    padding: 1.5rem 0 1.5rem 5rem;
`;
export default function(props) {
    
const buttonText = props.showBalance ? 'Hide Balance' : 'Show Balance';
let content = null;
if (props.showBalance) {
    content = <>Balance: ${props.amount}</>;
}
return (
    <Section>
        {content}
    Balance: ${props.amount}
    <button onClick={props.handleBalanceVisibilityChange}>{buttonText}</button>
    </Section>
);
}
1 Like
#54
CoinList.jsx 
import React 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 function CoinList(props) {

  return (
    <Table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Ticker</th>
          <th>Price</th>
          {props.showBalance ? <th>Balance</th> : null}
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {
          props.coinData.map(({ key, name, ticker, price, balance }) =>
            <Coin key={key}
              handleRefresh={props.handleRefresh}
              name={name}
              ticker={ticker}
              showBalance={props.showBalance}
              balance={balance}
              price={price}
              tickerId={key} />
          )
        }
      </tbody>
    </Table>
  )
}
AccounBalance.jsx 
import React 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 5rem;
`;

export default function AccountBalance(props) {

    const buttonText = props.showBalance ? 'Hide Balance' : 'Show Balance';
    let content = null;
    if (props.showBalance) {
        content = <>Balance: ${props.amount}</>;
    }
    return (
        <Section>
            {content}
            <button onClick={props.handleBalanceVisibilityChange}>{buttonText}</button>
        </Section>
    );
}

AccountBalance.propTypes = {
    amount: PropTypes.number.isRequired
}
#55

CoinList.jsx

//import React, { Component } from 'react'  //for class component use
import React from 'react';  //for functional component use
import PropTypes from 'prop-types';
import Coin from '../Coin/Coin';

export default function CoinList(props) {

  let coinBalanceHeader = null;
  if (props.showCoinBalanceHeader) {
      //to ensure correct jsx, make sure you use a react fragment
      coinBalanceHeader = <th>Balance</th>;
  }

  //Better Solution - ignore logic above and use this below instead
    //{this.props.toggleBalance ? <th>Balance</th> : null}
  return (
      <table className="coin-table">
      <thead>
        <tr>
          <th>Rank</th>
          <th>Name</th>
          <th>Ticker</th>
          {coinBalanceHeader}
          <th>Price</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {
          props.coinData.map( ({id, rank, name, ticker, balance, price}) =>
          <Coin key={id} //should be key={key}
                id={id}
                handleRefresh={props.handleRefresh} 
                showCoinBalanceHeader={props.showCoinBalanceHeader}
                rank={rank}
                name={name} 
                ticker={ticker} 
                balance={balance}
                price={price} />
          )
        }
      </tbody>
    </table>
  )
}

CoinList.propTypes = {
    showCoinBalanceHeader: PropTypes.bool.isRequired
  }

AccountBalance.jsx

//import React, { Component } from 'react'  //for class component use
import React from 'react';  //for functional component use
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Section = styled.section `
    border: 2px solid red;
    font-size: 2rem;
    padding: 1.5rem 0 1.5rem 5 rem;
`

export default function AccountBalance(props){

    const balanceClick = (event) => {
        // Prevent the default action of submitting the form
        event.preventDefault();
        props.toggleBalance(props.showBalance);
    }

    //to switch to show balance from hide balance, the showBalance in App.js must be false 
    const buttonText = props.showBalance ? 'Hide Balance' : 'Show Balance';
    let content = null;

    if (props.showBalance) {
        //to ensure correct jsx, make sure you use a react fragment
        content = <>{props.amount}</>;
    }
    //original -- Balance: ${this.props.ammount}

    return (
        <>
        <h2>
            ACCOUNT BALANCE
        </h2>
        <Section>
            Balance: ${content}
            <form action="#" method="POST">
            <button onClick={balanceClick}>{buttonText}</button>
            </form>
        </Section>
        </>
    );
}

AccountBalance.propTypes = {
  amount: PropTypes.number.isRequired
  ,showBalance: PropTypes.bool.isRequired
}
1 Like
#56

coinList:

export default function CoinList(props) {
    const balance = props.showBalance ? <th>Balance</th> : null;

    return (
        <Table>
            <thead>
                <tr>
                <th>Name</th>
                <th>Ticker</th>
                <th>Price</th>
                {balance}
                <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {props.coinData.map(({ key, name, ticker, balance, price }) => (
                    <Coin
                        key={key}
                        id={key}
                        handleRefresh={props.handleRefresh}
                        name={name}
                        ticker={ticker}
                        price={price}
                        showBalance={props.showBalance}
                        balance={balance}
                    />
                ))}
            </tbody>
        </Table>
    )
}

AccountBalance:

export default function AccountBalance (props) {
    const buttonText = props.showBalance ? 'Hide Balance' : 'Show Balance'
    let balance = props.showBalance ?
        <span>Account Balance: ${props.amount}</span>
        : null;
    
    return (
        <Section>
            {balance}
            <Button onClick={props.handleBalanceVisibility}>{buttonText}</Button>
        </Section>
    )
}

AccountBalance.propTypes = {
    amount: PropTypes.number.isRequired
}
1 Like
#57

CoinList:
export default function Coinlist (props) {

    return (

        <Table>

  <tr>

      <th>Name</th>

      <th>Ticker</th>

      <th>Price</th>

      { props.showBalance && <th>Balance</th>}

      <th>Actions</th>

  </tr>

{

  this.props.coinData.map( ({key, name, ticker, price, balance}) =>

     <Coin 

     key={ticker} 

     handleRefresh={props.handleRefresh}

     name={name} 

     ticker={ticker} 

     balance={balance} 

     price={price}

     showBalance = {props.showBalance}

     tickerId={key}

     />

     )

}

    </Table>

    )

}

AccountBalance:
export default function AccountBalance (props) {

    const buttonText = props.showBalance ? "HIDE BALANCE" : "SHOW BALANCE"

    let content= null

    if (props.showBalance) {

        content = <> Balance: ${props.amount} </>

    }

    return (

        <Section>

           {content}

           <br/>

           <button onClick={props.handleBalance}>{buttonText}</button>

        </Section>

    );

}

#58

Here is fractional component for CoinList

//rccp
import React 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;`;

// rewrite coinlist component into functional component

export default function CoinList(props) {
    return (
      <Table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Ticker</th>
          <th>Price</th>
          {props.showBalance ? <th>Balance</th> : null }
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
      {
          //distructured version - recommended; more explicit
          props.coinData.map( ({key, name, ticker, price, balance}) =>
              <Coin key={key} 
              handleRefresh={props.handleRefresh}
              name={name} 
              ticker={ticker}
              showBalance={props.showBalance}
              balance={balance}
              price={price}
              tickerId={key}
               />
            )
        }
      </tbody>
    </Table>
    )
  
}

for AccountBalance, I could not quite get it right. I get an error

//rcc tab for class-based component
import React from 'react';
import styled from 'styled-components'
//rccp
import PropTypes from 'prop-types'

const Section = styled.section`
  font-size: 2rem;
  text-align left;
  padding: 1.5rem 0 1.5rem 5rem;
  `;

  

// rewrite account balance class component into a functional component
export default function AccountBalance(props) {
  

  render() {
    const buttonText = props.showBalance ? "Hide Balance" : "Show Balance"; // this action 
    let contents = null;
    if (props.showBalance) {
      contents = <> Balance: ${props.amount};</>
    }

    return (
      <Section>
        {contents}
        <button onClick={this.handleToggleChange}>{buttonText}</button>
      </Section>
    )
  };
}


AccountBalance.propTypes = {
  amount: PropTypes.number.isRequired
}

error, it says I need a colon

> 19 |   render() {
     |           ^
  20 |     const buttonText = props.showBalance ? "Hide Balance" : "Show Balance"; 
  21 |     let contents = null;
  22 |     if (props.showBalance) {
#59

I forgot to remove the render() {} function and I had changed it to {this.handleToggleChane} becaus I thought it was not working but changed it back to props

//rcc tab for class-based component
import React from 'react';
import styled from 'styled-components'
//rccp
import PropTypes from 'prop-types'

const Section = styled.section`
  font-size: 2rem;
  text-align left;
  padding: 1.5rem 0 1.5rem 5rem;
  `;

  

// rewrite account balance class component into a functional component
export default function AccountBalance(props) {

    const buttonText = props.showBalance ? "Hide Balance" : "Show Balance"; // this action 
    let contents = null;
    if (props.showBalance) {
      contents = <> Balance: ${props.amount};</>
    }

    return (
      <Section>
        {contents}
        <button onClick={props.handleToggleChange}>{buttonText}</button>
      </Section>
    )

}


AccountBalance.propTypes = {
  amount: PropTypes.number.isRequired
}
#60

CoinList.jsx

import React from 'react';
import styled from 'styled-components';
import Coin from './Coin';

const Table = styled.table`
    margin: 50px auto 50px auto;
    display: inline-block;
    font-size: 1.25rem;
`;

export default function CoinList(props) {
    return (
        <Table>
        <thead>  
            <tr>        
                <th>Name</th>
                <th>Ticker</th>
                <th>Price</th>
                {props.showBalance ? <th>Balance</th> : null}
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {
            props.coinData.map( ({key, name, ticker, price, balance}) =>
                <Coin   key={key} 
                        handleRefresh={props.handleRefresh}
                        name={name} 
                        ticker={ticker} 
                        showBalance={props.showBalance}
                        balance={balance}
                        price={price}  
                        tickerId={key}  />
            )
        }
        </tbody>
        </Table> 
    )
}

AccountBalance.jsx

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

const Section = styled.section`
    background: transparent;
    font-size: 4rem;
    border-radius: 4px;
    border: 1px solid rgb(130, 190, 230);
    color: rgb(130, 190, 230);
    margin: 0 1em;
    padding: 1.5rem 0 1.5rem 2rem;
`;

export default function AccountBalance(props) {
    
    const buttonText = props.showBalance ? 'Hide Balance' : 'Show Balance';
    let content = null;
    if ( props.showBalance ) {
        content = <>Balance: ${props.amount}</>;
    }
    return (
        <Section>
            {content} 
            <button onClick={props.handleBalanceVisibilityChange}> {buttonText}</button>
        </Section>
    );
}

AccountBalance.propTypes = {
    amount: PropTypes.number.isRequired
}