Styled Components exercise

React Web Development Course
#62 
import styled from 'styled-components';

const Td = styled.td`
    border: 1px solid white;
    width: 15vh;
`;

 render() {
        return (
              <tr className = "coin-row">
                <Td>{this.props.name}</Td>
                <Td>{this.props.ticker}</Td>
                <Td>${this.state.price}</Td>
                <Td>
                    <form action="#" method="POST">
                     <button onClick={this.handleClick}>Refresh</button>
                    </form>
                </Td>
             </tr>
        )
    }
2 Likes
#63
Declaring the styled element 
const TD = styled.td` {
    border: 1px solid #cccccc;
    width: 25vh;
}`;
Using the newly styled element in render() 
<tr>
                <TD>{this.props.name}</TD>
                <TD>{this.props.ticker}</TD>
                <TD>${this.state.price}</TD>
                <TD>
                    <form action="#" method="POST">
                        <button onClick={this.handleClick}>Refresh</button>
                    </form>
                </TD>
            </tr>
1 Like
#64

I am running into this error as well. TypeError: styled_components__WEBPACK_IMPORTED_MODULE_2__.default.hdr is not a function

Strangley enough, it works in coin.jsx but does not work when I try to make a styled component for the header.jsx. I looked through the forums but could not find a solution. I check installation and all, but yea as I said, it works for the coin.jsx but not in header.jsx. whats the deal here?

import styled from 'styled-components';

const Hdr = styled.dr ` {
    border: 1px solid #cccccc;
    width: 25vh;
}
`;
#65

Did you find a solution? Having the same issue here

#66

Through my readings I determined it would take more time than be worth to locate and rewrite library files with my current aptitude of the systems. I decided to just remove styled components from my project and instead do a stylesheet using CSS.

#67

There is no html tag called “dr” therefore, it breaks. If you use the styled.div or styled.p , it would work. dr is not a html element.

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

const CoinRow =styled.td`
  border:3px solid #10b8eb;
  width: 25vh;`
export default class Coin extends Component {
  constructor(props){
    super(props);
    this.state= {
      price: this.props.price

    }
    this.handleClick=this.handleClick.bind(this);
  }  
  handleClick(event){
    event.preventDefault();
    const randomPercentage= .995+ Math.random()*.01;
    this.setState(function(oldState){
      return{
        price: oldState.price * randomPercentage
      };
    });

  
}


  render(){
        return (
          <tr >
            <CoinRow>{this.props.name}</CoinRow>
            <CoinRow>{this.props.ticker}</CoinRow>
            <CoinRow>${this.state.price}</CoinRow>
            <CoinRow>
              <form action="#" method="POST">
              <button onClick={this.handleClick}>Refresh</button>
              </form>
            </CoinRow>   
          </tr>
         
        );
    }
  }
2 Likes
#69 

const CoinTd = styled.td`

  border: 1px solid #cccc;
  width: 25vh;
`;

	render(){
		return( 
		<tr>
			<CoinTd>{this.props.name}</CoinTd>
			<CoinTd>{this.props.ticker}</CoinTd>
			<CoinTd>${this.state.price}</CoinTd>
			<CoinTd>
				<form action="#" method="POST">
					<button onClick={this.handleClick}>Refresh</button>
				</form>
			</CoinTd>
		</tr>
		);
	}
1 Like
#70

const Td = styled.td font-size: 1.5rem; border: 1px solid black; width: 25vh;;

2 Likes
#71

Coin.jsx

import React, { Component } from 'react';

import PropTypes from 'prop-types';

import styled from 'styled-components';

/*

.coin-row td {

    border: 1px solid #f703ff;

    width: 25vh;

}

*/

const CoinRow = styled.td`

border: 1px solid;

    width: 25vh;

`;

export default class Coin extends Component {

    constructor(props) {

        super(props);

        this.state = {

            price: this.props.price

        }

        this.handleClick = this.handleClick.bind(this);

    }

    handleClick(event) {

        // Prevent the default action of submitting the form

        event.preventDefault();

        const randomPercentage = 0.995 + Math.random() * 0.01;

        this.setState( function(oldState) {

            return {

                price: oldState.price * randomPercentage

            };

        });

    }

    render() {

        return (

            <tr>

              <CoinRow>{this.props.name}</CoinRow>

              <CoinRow>{this.props.ticker}</CoinRow>

              <CoinRow>${this.state.price}</CoinRow>

              <CoinRow>

                  <form action="#" method="POST">

                  <button onClick={this.handleClick}>Refresh</button>

                  </form>            

              </CoinRow>

            </tr>

           );

    }

}

Coin.propTypes = {

    name: PropTypes.string.isRequired,

    ticker: PropTypes.string.isRequired,

    price: PropTypes.number.isRequired

}
2 Likes
#72

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

{this.props.name} {this.props.ticker} ${this.state.price} Refresh
2 Likes
#73

I added designs on the table headings directly in the App.js file and it works also :slight_smile:

image

App.js 
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Coin from './components/Coin/Coin';
import AccountBalance from './components/AccountBalance/AccountBalance';
import styled from 'styled-components';

const TitleDetails = styled.th`
    border: 2px solid burlywood;
    width: 25vh;
    background-color: black;
    color: white;
`;
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="React logo" />
        <h1 className = "App-title">
          Coin Exchange
        </h1>
        <p className = "App-subtitle">
          by: Xyz Fiegalan
        </p>
      </header>

      <AccountBalance amount = {10000} />

      <table className = "coin-table">
        <thead>
          <tr>
            <TitleDetails>Name</TitleDetails>
            <TitleDetails>Ticker</TitleDetails>
            <TitleDetails>Price</TitleDetails>
          </tr>
        </thead>
        <tbody>
          <Coin name="Bitcoin" ticker="BTC" price ={60000}/>
          <Coin name="Ethereum" ticker="ETH" price ={2500}/>
          <Coin name="Cardano" ticker="ADA" price ={1.5}/>
          <Coin name="Binance" ticker="BNB" price = {600}/>
        </tbody>
      </table>
    </div>
  );
}

export default App;
AccountBalance.jsx 
import React, { Component } 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 class AccountBalance extends Component {
    render() {
        return (
            <Section1 className = "balance">
              Current Balance is: {this.props.amount} USD
            </Section1>
        );
    }
}

AccountBalance.propTypes = {
    amount: PropTypes.number.isRequired
}```
Coin.jsx 
import React, { Component } from 'react'
import styled from 'styled-components';
import PropTypes from 'prop-types';

const RowDetails = styled.td`
    border: 2px solid burlywood;
    width: 25vh;
    background-color: white;
`;

export default class Coin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            price: this.props.price
        }
        this.handleClick = this.handleClick.bind(this);
    }
 
    handleClick(event) {
    // Prevent the default action of submitting the form
        event.preventDefault();

        const randomPercentage = 0.995 + Math.random() * 0.01;
        this.setState( function(oldState) {
            return {
                price: oldState.price * randomPercentage
            };
        })
    }
    render() {
        return (
        <tr>
            <RowDetails>{this.props.name}</RowDetails>
            <RowDetails>{this.props.ticker}</RowDetails>
            <RowDetails>${this.state.price}</RowDetails>
            <RowDetails>
                <form action = "#" method = "POST">
                    <button onClick = {this.handleClick}>Refresh</button>
                </form>
            </RowDetails>
        </tr>
        )
    }
}

Coin.propTypes = {
    name: PropTypes.string.isRequired,
    ticker: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired
}
2 Likes
#74

import React, { Component } from ‘react’

import propTypes from ‘prop-types’;

import styled from ‘styled-components’;

const Td = styled.td`

border: 2px solid darkslategray;

width: 30vh;

`;

export default class coin extends Component {

constructor(props) {

    super(props); 

    this.state = {

        price: this.props.price

    }

  this.handleClick = this.handleClick.bind(this);

}

handleClick(event) {

       event.preventDefault(); 

  

        const randomPercentage = 0.995 + Math.random() * 0.01; 

        this.setState( function(oldState) {

            return {

                price: oldState.price * randomPercentage

            }; 

        }); 

     }



render() {

    return (

        <tr className="coin-row">

          <Td>{this.props.name}</Td> 

          <Td>{this.props.ticker}</Td> 

          <Td>${this.state.price}</Td> 

          <Td>

              <form action = "#" method = "POST">

               <button onClick={this.handleClick}> Refresh </button>

              </form>

              </Td>

        </tr>

    );

}

}

coin.propTypes = {

name: propTypes.string.isRequired, 

ticker: propTypes.string.isRequired, 

price: propTypes.number.isRequired

}

2 Likes
#75 
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Td = styled.td`
	border: 1px solid #cccccc;
	width:12vh;
	font-size:0.8rem;	
	background-color: #e253dd;
	border-radius:25px;
`;

class Coin extends React.Component {
	render() {
		return (
			<tr className="coinRow">
				<Td>{this.props.name}</Td>
				<Td>{this.props.ticker}</Td>
				<Td>{this.props.priceGBP}</Td>
				<Td>{this.props.priceETH}</Td>
			</tr>
		);
	}
}

Coin.propTypes = {
	name: PropTypes.string.isRequired,
	ticker: PropTypes.string.isRequired,
	priceGBP: PropTypes.number.isRequired,
	priceETH: PropTypes.number.isRequired
};

export default Coin;
2 Likes
#76 
import React, { Component } from 'react'
/* import "./Coin.css" */
import PropTypes from 'prop-types'
import styled from 'styled-components'


const Td = styled.td`
    border: 1px solid #cccc;
    width: 25wh;
`

export default class Coin extends Component {
    constructor(props){
        super(props);
        this.state = {
            price: this.props.price
        }
        this.handleClick = this.handleClick.bind(this);
    }

    

    handleClick(event){
        event.preventDefault();

        const randomPercentage = 0.995 + Math.random() * 0.01;
        this.setState(function(oldState){
            return{
                price: oldState.price * randomPercentage
            };
        })
    }

    render() {
        return (
                   <tr className="coin-row">
                    <Td>{this.props.name}</Td>
                    <Td>{this.props.ticker}</Td>
                    <Td>$ {this.state.price}</Td>
                    <Td>
                        <form action="#" method="POST">
                            <button onClick={this.handleClick}>Refresh</button>
                        </form>
                    </Td>

                   </tr>
        )
    }
}

Coin.propTypes = { //typechecking
    name: PropTypes.string.isRequired,
    ticker: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired,
}
2 Likes
#77 
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

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

export default class Coin extends Component {
    constructor(props){
        super(props)
        this.state = {
            price: this.props.price
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(event){
        event.preventDefault();
        const randomProcentage = 0.995 + Math.random() * 0.01;
            this.setState(function(oldState){
                return {
                    price: oldState.price * randomProcentage
                };
            });

    }

    render() {
        return (
           <tr>
               <Td>{this.props.name}</Td>
               <Td>{this.props.tiker}</Td>
               <Td>${this.state.price}</Td>
               <Td>
                   <form action="#" method = "POST">
                    <button onClick={this.handleClick}>Refres</button>
                   </form>
               </Td>
           </tr>
        )
    }
   
}

Coin.propTypes = {
    name: PropTypes.string.isRequired,
    tiker: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired
}
2 Likes
#78 
const CoinTd = styled.td`
    border: 1px solid #cccccc;
    width: 25hw;
  `;

render() {
        return (
            <tr className="coin-row">
                <CoinTd>{this.props.name}</CoinTd>
                <CoinTd>{this.props.ticker}</CoinTd>
                <CoinTd>${this.state.price}</CoinTd>
                
                <td>
                <form action="#" method="POST">
                    <button onClick={this.handleClick}>Refresh</button>
                </form>
                </td>
            </tr>

        )
    }
2 Likes
#79

image
image

2 Likes
#80

Here’s my answer:

import styled from 'styled-components';

const Td = styled.td`
  border: 1px solid #cccccc;
  width: 25vh;
`;
2 Likes
#81

VsCode extension for styled components:

https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components

1 Like