Coding exercise - Rewrite the CoinList

2tijan7 · November 9, 2021, 3:11pm

CoinList.jsx

import React, { Component } from 'react';
import Coin from "../Coin/Coin";
import styled from 'styled-components';

const Table = styled.table`
  margin: 30px auto 50px auto;
  border-collapse: collapse;
  display: inline-block;
  font-size: 1.4rem;
`;
const H1 = styled.h1`
  margin-top: 50px;
`;
const Th = styled.th`
border: 1px solid grey;
`;

export default function CoinList(props) {
  return (
    <>
    <H1>Top 5 Cryptocurrencies by Market Cap:</H1>
    <Table>
      <thead>
        <tr>
          <Th>Name</Th>
          <Th>Ticker</Th>
          <Th>Price</Th>
          {props.showBalance ? <Th>Balances</Th> : null}
          <Th>Refresh</Th>
        </tr>
      </thead>
      <tbody>
        {
          props.coinData.map( ({name, ticker, price, balance, key}) =>
            <Coin
              key={key}
              tickerId={key}
              handleRefresh={props.handleRefresh}
              name={name}
              ticker={ticker}
              balance={balance}
              showBalance={props.showBalance}
              price={price}
            />
          )
        }
      </tbody>
    </Table>
    </>
  )
}

AccountBalance.jsx

import React, { Component } from 'react';
import PropTypes from "prop-types";
import styled from 'styled-components';

const Section = styled.section`
    margin-top: 4rem;
    font-size: 2rem;
    text-align: center;
`;
const Strong = styled.strong`
    margin-right: 2rem;
`;
const Button = styled.button`
    background-color: rgb(221, 243, 255);
    border: none;
    border-radius: 20px;
    padding: 0.75rem;
    font-size: 1.65rem;
    margin-bottom: 2rem;
    &:hover {
        background-color: rgb(180, 229, 255);
    }
`;


export default function AccountBalance(props) {
    const buttonText = props.showBalance ? "Hide Balances" : "Show Balances"
    const renderBalance = props.showBalance ? <span><Strong>Account Balance:</Strong><span>{props.amount}€</span></span> : null;

    return (
        <Section>
            {renderBalance}
            <br/>
            <Button onClick={props.toggleBalance}>{buttonText}</Button>
            <hr/>
        </Section>
    );
}


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

Attiss · January 10, 2022, 10:31am

So much nicer to look at…

CoinList

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

AccountBalance

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

const AccountBalanceContainer = styled.div`
    display: inline-block;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: 3rem;
    margin-right: 3rem;
    margin-top: 1rem;
    border: 1px solid #FFFFFF;
    `

const AccountBalanceText = styled.p`
    font-size: 1.5rem;
    color: #f2f7af;
    `

export default function AccountBalance(props) {

    const handleClick = (event) => {
        event.preventDefault()
        props.handleShowBalance(props.showBalance)
    }

    return (
        <div>
            <AccountBalanceContainer>
                
                    <AccountBalanceText>
                    {props.showBalance ? `Account Balance: $${props.amount}` : null}
                    <button onClick={handleClick}>{props.showBalance ? 'Hide Balance' : 'Show Balance'}</button>
                    </AccountBalanceText>
                
            </AccountBalanceContainer>
        </div>
    )
    
}

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

crypto-djent76 · January 20, 2022, 6:09pm

Coding exercise: Rewrite the CoinList and AccountBalance components into functional components.

CoinList.js

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

Coin.js

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

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

export default function Coin(props) {
    
    const handleClick = (event) => {
        //prevent the default action of submitting the form
        event.preventDefault();
        props.handleRefresh(props.id);
    }
    let changeBalance = props.showBalance ? <CoinTd>{props.balance}</CoinTd> : "*****";
    return (
        <tr>
            <CoinTd>{props.name}</CoinTd>
            <CoinTd>{props.ticker}</CoinTd>
            <CoinTd>${props.price}</CoinTd>
            {changeBalance}
            <CoinTd>
                <form action='#' method='POST'>
                  <button onClick={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 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 function AccountBalance(props) {
    const handleClick = (event) => {
        event.preventDefault();
        props.handleShowBalance();
    }
    let buttonText = props.showBalance ? "Hide Balance" : "Show Balance";
    let balance = props.showBalance ? <span><strong>Balance:</strong> ${ props.amount }</span> : "*****";
    return (
        <Section>
            { balance }
            <Button onClick={handleClick}>{ buttonText }</Button>
        </Section>
    );
}


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

alp257 · January 29, 2022, 2:37pm

CoinList.jsx

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

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

export default function CoinList(props) {
    let tableBalance = null;

    if (props.showBalance) {
      tableBalance = <td>Balance</td>;
    }

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

AccountBalance.jsx

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

const Section = styled.section`
  color: rgb(121, 209, 121);
  text-align: right;
  padding: 1rem 3rem 1rem 0rem;
`;

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

  let accountBalance = null;
  if (props.showBalance) {
    accountBalance = <>Your Balance: {props.amount}</>;
  }

  return (<Section>
            {accountBalance}
            <button onClick={props.handleDisplayBalance}>{balanceButtonText}</button>
          </Section>
  );
}

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

Zaqoy · February 8, 2022, 9:33pm

CoinList

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>Refresh Price</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>
        </CoinTable>
    );
}

AccountBalance

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 = <>Account Balance: ${props.amount}</>
        }
        return (
            <Section>
                {content}
                <button onClick={props.toggleBalance}>{buttonText}</button>
            </Section>
        );
}

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

diegosan · February 15, 2022, 2:42pm

I watched Zolt’s example with the Coin.jsx file for a refresher. Functional components definitely seem less complex, although I understand class components are still important to learn.

AccountBalance.jsx

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

// we can use any name here and replace the html tag with it 
const Section = styled.section `
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    margin: 30px auto 0 30px;
    font-size: 1.7rem;
    font-weight: 400;
`

const Button = styled.button `
    color: #282c34;;
`

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
}

CoinList.jsx

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

const Table = styled.table `
    margin: 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>
        {
          // we give the return value of this functino is the component Coin 
          // each item needs a unique id, so we use ticker as each coin has a unique ticker 
          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>
  )

}

Pavlo · February 18, 2022, 12:19am

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

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.handleBalance}>{buttonText}</button>
          </Section>
      )
  }

Baz · April 6, 2022, 6:17am

Function view is way better, cleaner with less code, and more readable just like python

AccountBalance.js

import styled from "styled-components";

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

const Button = styled.button`
  font-size: 1.4rem;
  margin: 1.5rem 0 1.5rem 5rem;
`;

export default function AccountBalance(props) {
  const buttonText = props.showBalance ? "Hide Balance" : "Show Balance";
  let balance = "*****";

  if (props.showBalance) {
    balance = <>{props.amount}</>;
  }

  return (
    <Section>
      Balance: ${balance}
      <Button onClick={props.handleBalance}>{buttonText}</Button>
    </Section>
  );
}

CoinList.js

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>
          <th>Balance</th>
          <th>Actions</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}
            balance={balance}
            price={price}
          />
        ))}
      </tbody>
    </Table>
  );
}

Pyjama_Man · May 16, 2022, 5:49pm

CoinList.js

import React from 'react'
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;
`
  
export default function CoinList ({ showBalance, handleRefresh, handleBalanceVisability, coinData }) {
    return (
        <Table className='coin-table'>
        <thead>
          <tr>
            <th>Name</th>
            <th>Ticker</th>
            <th>Price</th>
            { showBalance && <th>Balance</th> }
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {
          coinData.map(({ key, name, ticker, price, balance })=> 
          <Coin 
          balance={ balance } 
          showBalance={ showBalance } 
          handleBalanceVisability={ handleBalanceVisability }
          handleRefresh={ handleRefresh } 
          key={ key } 
          tickerId={ key }
          name={ name } 
          ticker={ ticker } 
          price={ price } />
        )
          }
        </tbody>
      </Table>
    )
  }

AccountBalance.js

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 ({ showBalance, amount, handleBalanceVisability })  {
    const buttonText = showBalance ? "Hide Balance" : "Show Balance"

    return (
        <Section>
          {showBalance && `Balance: $ ${ amount }`}
          <button onClick={ handleBalanceVisability }>{ buttonText }</button>
        </Section>
    )
}

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

MichaelW · May 21, 2022, 5:42am

CoinList.jsx:

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}
                /> 
          // ..value = name={name}, ticker={ticker}, price={price}
          )
        }
      </tbody>
    </Table>
  )
}

AccountBalance.jsx:

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

}

Vanhait · July 5, 2022, 2:00am

AccountBalance.jsx

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

const Section = styled.section`
  background-color: black;
  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
}

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.75rem;
`;

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

rostyslavdzhohola · July 7, 2022, 9:52pm

AccountBalance.jsx

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

const Section = styled.section`
    width: 50%;
    font: bold;
    font-size: 2.4rem;
    position: absolute;
    left: 15%;
    text-align: left;
    padding: 1.5 rem 0 1.5rem 5rem;
    border-bottom: 1px solid black;
`;

const Button = styled.button`
    background-color: #A6FFB5;
    font-weight: bold;
    font-size: 1rem;
    position: absolute;
    margin-top: 1.5rem;
    left: 100%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    align: right;
    

`;
export default function AccountBalance(props) {
    const handleClick = (event) => {
        event.preventDefault();
        props.handleHide();     
    }

    const buttonText = props.buttonState ? 'Hide' : 'Show';
    return (
        <Section>
            {props.buttonState && (<>Balance: ${(props.amount).toFixed(2)}</>)}
            <Button onClick={handleClick}>{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.5rem;
`

export default function CoinList(props) {
    return (
        <Table>
            <thead>
            <tr>
                <th>Name</th>
                <th>Ticker</th>
                <th>Price</th>
                <th>Balance</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            { 
                props.coinData.map(({key, name, ticker, id, price, balance}) => 
                    <Coin   key={key} 
                            name={name} 
                            ticker={ticker}
                            balance={balance}
                            price={price}
                            id={id}
                            buttonState={props.buttonState}
                            calculateBalance={props.calculateBalance}
                            handleRefresh={props.handleRefresh} />
                )
            }
            </tbody>
        </Table>
    )
}

CipherGrind · August 21, 2022, 5:21am

CoinList.jsx

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

const Table = styled.table`
  margin: 25px auto 25px auto;
  display: inline-block;
  padding: 5px;
`;

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} 
                      balance={balance}
                      showBalance={props.showBalance}
                      price={price}
                      tickerId={key} />
            )
        }
        
        </tbody>
    </Table>

    )
}

AccountBalance.jsx

import React from 'react'
import PropTypes from 'prop-types';
import './AccountBalance.css';

export default function AccountBalance (props) {
        const buttonText = props.showBalance ? 'Hide Balance' : 'Show Balance';
        let balanceToggle = null;
        if (props.showBalance) {
            balanceToggle = <>Account Balance: ${props.amount}</>;
        }
        return (
            <section className="AccountBalance"> 
                    <button className="BalanceButton" 
                        onClick={props.handleChangeBalance}> 
                        {buttonText} 
                    </button>
                    {balanceToggle}
                    
            </section>
        );
}

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

Yehor · August 30, 2022, 1:13pm

AccountBalance.jsx

export default function AccountBalance(props) {

    const buttonText = props.showBalance 
    ? 'Show Balance' : 'Hide Balance' ;

    let balance = props.showBalance ? '' : <div className='balance_text'>Balance: ${props.amount}</div>;

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

CoinList.jsx

export default function Coin(props)  {

  const handleClick = (event) => {
    event.preventDefault();
    props.handleRefresh(props.id);
  }

    return (
      <tr className='coin-row'>
      <td>{props.name}</td>
      <td>{props.ticker}</td> 
      <td>${props.price}</td>
      {props.showBalance ? <><td>{props.balance}</td></> : '' }
      <td>
          <button onClick={handleClick}>Refresh</button>
      </td>
    </tr>
    );
}

ahsn · December 7, 2022, 8:43am

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

const Section = styled.section`
  display: flex;
  flex-flow: column;
  align-items: center;
  margin-top: 20px;
  font-size: 2rem;
  text-align: left;
  padding: 1.5rem 1.5rem 2rem;
  font-family: Arial, Helvetica, sans-serif;
`;

const Button = styled.button`
  margin-top: 7px;
  justify-content: center;
  width: 10%;
  display: flex; 
  padding: 7px;
`;

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


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

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

const Table = styled.table`
  margin: 15px auto 50px auto;
  display: inline-block;
  font-size: 1.4rem;
  td{
    padding: 10px;
    background-color: #ebf7ff;
  }
`;



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}
            id={key} // as key can't be retrieved
            handleRefresh={props.handleRefresh} 
            name={name} 
            ticker={ticker}
            showBalance={props.showBalance}
            balance = {balance} 
            price={price} />
          )
        }
      </tbody>
    </Table>
    </>
  )
}

pappas_kellyn · December 30, 2022, 8:11pm

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>Refresh</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>
        </CoinTable>
    );
}

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.toggleBalance}>{buttonText}</button>
            </Section>
        );
}

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

JPLaclau · January 8, 2023, 1:08pm

CoinList

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}
            price={price}
            balance={balance}
            showBalance={props.showBalance}
            tickerId={key}
          />
        ))}
      </tbody>
    </Table>
  );
}

AccountBalance

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

const Section1 = styled.section`
  font-size: 2rem;
  tex-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 (
    <Section1>
      {content}
      <button onClick={props.handleBalanceVisibilityChance}>
        {buttonText}
      </button>
    </Section1>
  );
}

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

unwise_guy · March 1, 2023, 9:39am

Account Balance

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;
    color: white
    
`;


export default function AccountBalance (props) {
   
        const buttonText = props.showBalance ? 'Hide Balance' : 'Show Balance'; //button functionality
        let content = null;
        if( props.showBalance){
            content = <>Balance: ${props.amount}</>
        }
        
        
            
        return (
            <Section>
                {content}    
                 <button onClick={props.toggleBalance}>{buttonText}</button> 
            </Section>  //here we are calling the toggleBalance function from the button

        );
    }

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

CoinList

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

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

export default function CoinList (props) {
  
  return (
      
      <Table>
      <thead>
        <tr>
          <th>Currency</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>
    )
  }

codinginlondon · September 10, 2023, 1:35pm

Hello

This the new code for CoinList:

CoinList.js


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

const CoinTable = styled.table`
margin: 50px auto 50px auto
text-align: left;
`;

export default function CoinList(props){

    return(
    <CoinTable>
        <thead>
            <tr>
                <th>Name</th>
                <th>Ticker</th>
                <th>Price</th>
                <th>Balance</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>

            {
                // console.log(this.props.coinData);

                props.coinData.map( ({id, name, ticker, price, balance} ) => 
                    <Coin 
                    key={id}
                    id={id}
                    name={name}
                    price={price}
                    ticker={ticker}
                    balance={balance}
                    showBalance={props.showBalance}
                    handleRefresh={props.handleRefresh}
                    />
                )
            }

        </tbody>
    </CoinTable>
    );

}

and AccountBalance:

AccountBalance.js


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

const Section = styled.section`
    padding: 1.5rem 0 1.5rem 4rem;
    color: grey;
    font-weight: bold;
    color: #333; 
    text-align: left;
    display: flex; /* Add this line */
    align-items: center; /* Add this line */    
`;

 
export default function AccountBalance(props){


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

        props.handleHideBalance();

    }

    const buttonText = props.showBalance ? 'Hide Balance': 'Show Balance';

    return (
        <Section>
          <form action="#" method="POST">
            <button onClick={handleClick}>{buttonText}</button>
          </form>
          {props.showBalance && (
            <span style={{ marginLeft: '1rem' }}>Balance: ${props.amount}</span>
          )}
        </Section>
      );

}

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

The app is still working, though I don’t know how to align the price table to the centre of the screen.

Github:
https://github.com/CodingInLondon/moralisacademy-react/tree/4d34bcb19c24017f3ded4d97b3091c3f09b9ea67/coin-exchange/src