Styled Components exercise

Welcome to the discussion for the exercise Styled Components

Rewrite the Coin component styles using styled components.

Lost some hair before I realized I needed to update every td to Td:

const Td = styled.td`

border: 1px solid #cccccc;

width: 25vh;

`;

Styled Component Coin

Instead of applying the class to the parent item, define a styled td:

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

Then use the new <Td> styled component in the Coin template:

    render() {
        return (
            <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>
        );
    }

import React, { Component } from ‘react’;

import PropTypes from ‘prop-types’;

import styled from ‘styled-components’

const Td= styled.td`

background-color: #1dc254;

border: 1px solid;

width: 25vh;

color:white;

`;

export default class Coin extends Component {

constructor (props) {

super(props);

this.state = {

  price: this.props.price 

}

this.handleClick = this.handleClick.bind(this); // binding 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> 

        <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

};

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

const Td = styled.td` {
border: 1px solid;
width: 25vh;
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){
        event.preventDefault();
        const randomPercentage = 0.995 + Math.random() * 0.01;
        this.setState(function(oldState){
            return{
                price: oldState.price * randomPercentage
            };
        });

    };
    render() {
        return (
            <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>
        );
    }
}
const CoinRow = styled.td`

border: 1px solid #cccccc;

width: 25vh;

`;

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

Rewrite the Coin component styles using styled components.
Once you are done, you can verify your solution in the next video.

we create a styled-component with const Td = styled.td ' our css' . Td will replace td in the render function.

Coin.jsx
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 #cccccc;
    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 className="coin-row">
                  <Td>{this.props.name}</Td>
                  <Td>{this.props.ticker}</Td>
                  <Td>${this.state.price}</Td>
                  <Td>
                      <form action="">
                          <button onClick={this.handleClick}>Refresh</button>
                      </form>
                  </Td>
                </tr>
              );
    }
}

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

Not sure where else to post this, because there’s no thread for quiz 1. Question 2 is literally impossible to answer correctly. The answer is stated “Text”, but that isn’t one of the choices. So as a result the quiz throws a “fail” no matter how many times you redo it. This is obviously a mistake made by the devs. Please address and fix.

Styled.TD:

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

return val:

           <tr className ="coin-row">
                <TableData>{this.props.name}</TableData>
                <TableData>{this.props.ticker}</TableData>
                <TableData>{this.state.currency}{this.state.price}</TableData>
                <TableData>
                    <button onClick = { this.refreshPrice}>Refresh</button>
                </TableData>
            </tr>