Coding exercise - Rewrite the CoinList

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

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
}
1 Like

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
}

1 Like

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

1 Like
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
}
2 Likes
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>
        )
    
    
}
2 Likes

Github Link

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

2 Likes
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>
  );
}
2 Likes

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?

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

  • 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
}
1 Like

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


1 Like