Coding exercise - Rewrite the CoinList

[George]

AccountBalance.jsx:

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

CoinList.jsx:

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( ({key, name, ticker, price, balance}) =>
            <Coin key={key}
                  tickerID={key}
                  handleRefresh={props.handleRefresh}
                  showBalance={props.showBalance}
                  name={name} 
                  ticker={ticker} 
                  balance={balance}
                  price={price} />
          )
        }
      </tbody>
    </CoinTable>
  )
}

[Ishoboy]

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-left: 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
}

[bdoherty]

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> }
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {
          props.coinData.map( ({ key, name, ticker, price, balance }) => 
            <Coin key={key}
                  tickerId={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 Section = styled.section`
    font-size: 2rem;
    text-align: left;
    padding: 1.5rem 0 1.5rem 5rem;
`;

const Div = styled.div`
    float: left;
`;

export default function AccountBalance(props) {
    const buttonText =  props.showBalance? 'Hide Balance' : 'Show Balance'
    return (
        <Section>
            { props.showBalance && <Div>Balance: $ { props.amount }  </Div> }
            <button onClick={props.handleToggleBalance}>{buttonText}</button>
        </Section>
    )
}

AccountBalance.propTypes = {
    amount: PropTypes.number
}

[camarosan]

This time was easy

AccountBalance.jsx

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


const Section = styled.section `
text-align: center;
background: transparent;
border-radius: 50px;
border: 2px solid palevioletred;
color: white;
margin: 2 1em;
padding: 0.10em 3em;
`

export default function AccountBalance(props)  {
        const buttonText = props.showBalance ?  'HideBalance' : 'ShowBalance'; 
        const amountText = props.showBalance ? `Amount = ${props.amount}` : ' '; 
        return (
            <Section>   
                <p>{amountText}</p> 
                <button onClick = {props.handleBalanceVisibilityChange} >{buttonText}</button>
           </Section>
            
        )
}


AccountBalance.propTypes = {
   amount: PropTypes.number,
   showBalance: PropTypes.bool,
};

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;
    text-align: center;
    background-color: #000080;
    -webkit-box-shadow: 16px 17px 77px 75px rgba(0,0,0,0.8); 
    box-shadow: 16px 17px 77px 75px rgba(0,0,0,0.8)
`

export default function CoinList(props) {
      return (
        <div>
          <Table>
              <thead> 
                <tr>
                  <th>Name</th>
                  <th>Ticker</th>
                  <th>Price</th>
                  {props.showBalance ? <th>Balance</th> : null}
                  <th>Update</th>
                </tr>
              </thead>
            <tbody >
                { 
                props.coinData.map(({key,id, name, ticker, price, balance}) => <Coin key = {key} // changed to key= {key} 
                id = {id} // New i cannot use key 
                handleRefresh = {props.handleRefresh}
                name = {name} 
                ticker = {ticker} 
                price = {price} 
                balance = {balance}
                showBalance = {props.showBalance}/>) 
                }
            </tbody>  
          </Table> 
        </div>
        )
}

[mjwatson10]

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}) =>
              //the ...value enumerates the key values pars as props, basically taking each value from the objects in order and placing it in the tbody
              <Coin key={ticker}
                    handleRefresh={props.handleRefresh}
                    name={name}
                    ticker={ticker}
                    showBalance={props.showBalance}
                    balance={balance}
                    price={price}
                    tickerId={key}
              />
            )
        }
        </tbody>
      </Table>
    )
}

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
}

[CryptoDev]

export default 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} 
              ticker={ticker} 
              price={price}
              balance ={props.visible ? balance : "*"} 
              tickerId = {key}/>
          )
          
        }
        </tbody>
      </Table>
            
        )
}

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

[Uyan]

Github Link

EDIT: See the " rewrote class-based components as functional components" commit for the exact changes at the time

[serba]

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 handleClick = (event) => {
        event.preventDefault();
        props.handleToggleShowBalance();
    }
    const buttonText = props.showBalance ? 'Hide Balance' : 'Show Balance';
    const showAccountBalance = props.showBalance ? <span>Balance: ${props.amount} </span> : null;
    return (
        <Section>
            {showAccountBalance}
            <button onClick={handleClick} >{buttonText}</button>
        </Section>
    );
}

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

CoinList.jsx

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

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

export default function CoinList(props) {
    
  let coinBalance = props.showBalance ? <th>Balance</th> : null;
  return (
      <Table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Ticker</th>
          <th>Price</th>
          {coinBalance}
          <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>
  );
}

[newavel]

Hello Zsolt,

In real life scenarios, when should you use functional and class components? What are the differences if they show the same results anyway?

[zsolt-nagy]

Adapt to the standards of your team and watch industry trends. Both work, lately, functional components seem more popular.

[lucas]

• CoinList.jsx

import React from 'react'
import './CoinList.css'
import Coin from '../Coin/Coin'

export default function CoinList(props) {
   
   //console.log('CoinList: this.props.showBalance=',this.props.showBalance)
   var balanceTH
   if (props.showBalance) {
      balanceTH = <th>Balance</th>
   } else {
      balanceTH = null
   }

   return (
      <table className="coin-table">
         <thead>
            <tr>
            <th>Name</th>
            <th>Ticker</th>
            <th>Price</th>
            {balanceTH}
            <th>Action</th>
            </tr>
         </thead>
         <tbody>
            {
            props.coinData.map( 
               ({key, name, ticker, balance, price}) => 
                  <Coin 
                     key={key}
                     name={name} 
                     ticker={ticker}
                     balance={balance}
                     price={price} 
                     refreshPrice={props.refreshPrice}
                     showBalance={props.showBalance}
                  /> 
            )
            }
         </tbody>
      </table>
   )
}

• AccountBalance.jsx

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

const Section = styled.section`
   font-size: 1.5rem;
   text-align: center;
   background-color: rgba(0, 0, 0, 0.952);
   color: yellowgreen;
   margin-top: 5px;
   margin-bottom: 5px;
   /*height: 150px;
   line-height: 150px; */
`

const Button = styled.button`
   font-size: 1.3rem;
   margin: 0rem 0 0rem 0.8rem;
   /*border: 1px solid #cccccc;*/
   /*border-radius: 7px;*/
   /*padding: 5px 0px 5px px;*/
   
`

export default function AccountBalance(props) {
   
   const toggleBalance = (event) => {
      props.toggleBalance()
   }
  
   
   let balance
   let balanceButtonText
   if ( props.showBalance ) {
      balanceButtonText = 'Hide Balance'
      balance = <>Balance ${props.amount}</>
   } else {
      balanceButtonText = 'Show Balance'
      balance = null
   }
   
   return(
      <Section>
         {balance}
         <Button onClick={toggleBalance}>{balanceButtonText}</Button>
      </Section>
   )
   
}

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

[zach]

Update to functional component exercise:

Account Balance

import React, { Component } from 'react'

import PropTypes from 'prop-types';

import styled from 'styled-components';

const Section = styled.section`

export default function AccountBalance(props) {

    const handleShowBalance = (e) => {

        props.handleShowBalance();

    }

    

    const buttonText = (props.showBalance)? "Hide Balance" : "Show Balance";

    return (

        <> {props.showBalance ? 

                <Section> 

                   Balance: ${props.amount}   

                </Section>

                : null}

            <button onClick={handleShowBalance}>{buttonText}</button>

        </>

    );

}

AccountBalance.propTypes = {

    amount : PropTypes.number.isRequired

}

CoinList

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

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

[Bozidar]

AccountBalance.jsx

import './AccountBalance.css'
import React from 'react';
import propTypes from 'prop-types';
import styled from 'styled-components';

const Section = styled.section`
    background:  rgb(78, 162, 173);;
    font-size: 2rem;
    text-align: left;
    padding: 1.5rem 0 1.5rem 5rem;
`;

const Button = styled.button`\
    background: #1974D2;;
    color: #00FFFF;
    border: 2px solid #152238;
`;



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




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

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>
        )
    }

[Bhujanga]

Coin.jsx

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

const TD = styled.td` {
    border: 1px solid #cccccc;
    width: 25vh;
}`;

export default function Coin(props){
    
    const handleClick = (event) => {
            //Prevent default action of submitting the form
            event.preventDefault();
            //when call (f.e. by button) Passes this.props.ticker to the handleRefresh function in App.js. App.js is inheriting Coinlist.jsx which is inheriting Coin.jsx
            this.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

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){
  
      const balance = props.showBalance ? <th>Balance</th> : null;
        return (
          
               <Table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Ticker</th>
              <th>Price</th>
              {balance}
              <th>Actions</th>
            </tr>
          </thead>
          <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> 
     
        )
}

AccountsBalance.jsx

import React from 'react';

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

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

const BtnBalance = styled.button`
    font-size: 1.4rem;
    margin: 1.5rem 0 1.5rem 5rem;
    background-color: rgb(20, 56, 97);
    color: #cccccc;
    border: 1px solid #cccccc;
    border-radius: 7px;
`;




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

        

        return (    
        <Section>
        {content}
        <BtnBalance onClick={props.handleShowHide}>{buttonText}</BtnBalance>
        </Section>  
        );
}


AccountsBalance.propTypes = {

    amount: PropTypes.number
}

[Dominykas_Pozleviciu]

CoinList

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

export default function CoinList (props) {
    
        return (
            <table className="cointable">
            <thead className="thead-row">
              <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} 
                        ticker={ticker} 
                        balance={balance}
                        showBalance={props.showBalance}
                        price={price}
                        tickerId={key}
                        />
                )
    
              }
              
            </tbody>
          </table>
        )
    
}

AccountBalance

import React from 'react';
import propTypes from 'prop-types';
import './AccountBalance.css';
import styled from 'styled-components';

const Section = styled.section`
    
    font-size: 1.5rem;
    color: black;
    background-color: #40;
    padding: 1rem 8rem 1rem 1rem;
    text-align: right;

`;





export default function AccountBalance (props) {

   
        const buttonText = props.showBalance ?  //whether we need to show the balance or not
            'Hide Balance' : 'Show Balance';

        let balance = props.showBalance ?
            <>Balance: ${props.amount}</>
            : null;
        
        return (
            <Section>
                {balance}
                <button onClick={props.handleToggleShowBalance}> {buttonText}</button>
            </Section>
        );
    
}



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

[StanleyGM]

Coinlist

export default function CoinList(props) {

  const balanceHeader = props.showBalance ?
  <th>Balance</th> : null;

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

AccountBalance

export default function AccountBalance(props) {

    const handleClick = (event) => {
        props.hideShowBalance();
    }

    
        const buttonText = props.showBalance ? 
        'Hide Balance' : 'Show Balance';
        const balanceText = props.showBalance ? 
        <span>Balance ${props.amount}</span> : null;
        return (
            <Section>
                {balanceText}
                <button onClick = {(event) => handleClick(event)}>
                    {buttonText}
                </button>
            </Section>
                
        );
    
}```

[Big_Nine]

i

mport 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) {

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


                </tbody>
            </Table>
        </div>
    )
}




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 balance = props.showBalance ?
        <span>Balance: ${props.amount} </span>
        : null


    return (
        <Section>
            {balance}
            <button onClick={props.handleToggleShowBalance}>{buttonText}</button>
        </Section>
    );
}





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

[JonBal]

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, balance, price}) => 

      <Coin key={key} 

      tickerId={key}

      handleRefresh={props.handleRefresh} 

      name={name} 

      ticker={ticker} 

      showBalance={props.showBalance}

      balance={balance}

      price={price}

        />,

      )

    }

  </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.handleBalanceToggle}>{buttonText}</button>

        </Section>

    );

}

AccountBalance.propTypes = {

    amount: PropTypes.number.isRequired

}

[Samuel1]

import React from 'react';
import logo from '../../logo.svg';


export default function ExchangeHeader() {
    
        return (
            <div>
            <header className="App-header">
            <img src={logo} alt="React logo" className="App-logo"/>
            <h1 className="App-title">
                Coin Exchange
            </h1>
            </header>
            </div>
        )
    
}

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>
    </tr>
    </thead>
        <tbody>
        {
            props.coinData.map(
            ( {key, name, ticker, price}) => 
            <Coin key={key}
             handleRefresh={props.handleRefresh}
             name = {name} 
             ticker={ticker}
         
             showBalance={props.showBalance}
             price={price}
             tickerid={key}
             />
            )
        }

        </tbody>
    </table>

    
        )
    }

[maxs]

AccountBalance.jsx

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

const Section = styled.section`
    border: 1px solid red;
    text-align: left;
    padding: 1.5rem 0 1.5rem 5rem;
`;


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

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

CoinList.jsx

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

const Table = styled.table`
    margin: 50px;
    display: inline-block;
    text-align: center;
`

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>
                {
                    /* this.props.coinData.map(value => <Coin name={value.name} ticker={value.ticker} price={value.price}/>) */
                    props.coinData.map( ({key, name, ticker, balance, price}) =>
                        <Coin key={key}
                            handleRefresh={props.handleRefresh}
                            name={name}
                            ticker={ticker}
                            showBalance={props.showBalance}
                            balance={balance}
                            price={price}
                            tickerId={key} />
                    )
                }
                </tbody>
            </Table>
        )
}