Styled Components exercise

tanu_g · June 6, 2021, 9:47am

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

<tr >
        <TableData>{this.props.name}</TableData>
        <TableData>{this.props.ticker}</TableData>
        <TableData>${this.state.price}</TableData>
        <TableData>
          <form action="#" method="POST">
            <button onClick={this.handleClick}>Refresh</button>
          </form>
        </TableData>
</tr>

Julian97 · June 8, 2021, 7:42pm

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


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

wleskay · June 9, 2021, 1:11pm

import styled from 'styled-components';
const Tr = styled.tr `
    border: 1px solid #ccc;
    width: 25vh;
`;

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

Trent · June 10, 2021, 2:13pm

I played around with some different options before arriving upon a working conclusion and of course skipped ahead to confirm I was correct. Originally I thought logically it would make sense to style due to the className changes for CSS but found that didnt provide the desired result, which led me to manipulating into . Styling is fun.

import React, { Component } from 'react'

import styled from 'styled-components';

import PropTypes from 'prop-types';

const Td = styled.td `

margin: 25rem;

border: solid 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 = .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, 

}

Emmanuel · June 14, 2021, 7:41am

const Td = styled.td(insert css)
;

Riki · June 15, 2021, 2:17pm

Hi,

My code:

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


const Td = styled.td `
    border-radius: 22%;
    border: 1px solid #ffffff;
    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>
            <Td>{this.props.name}</Td>
            <Td>{this.props.ticker}</Td>
            <Td>${this.state.price}</Td>
            <Td>
                <form action="#" methood="POST">
                <button onClick={this.handleClick}>Refresh</button>
                </form>
                </Td>
            </tr>
        );
    }
}

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

CBlock9 · June 19, 2021, 6:05pm

import styled from 'styled-components';
const Td = styled.td`
 border: 1px solid #cccccc;
 width: 25vh;
`;

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

andrequintino · June 21, 2021, 9:50pm

import styled from 'styled-components';

const Td = styled.td`

    border: 1px solid #cccccc;
    width: 25vh;

`;

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>

        )

    }

jak · July 5, 2021, 2:08pm

Omg, took me ages too aha

jak · July 5, 2021, 2:12pm

Don’t forget to change the elements to capitals!

import styled from 'styled-components'

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

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
`;

and the table… (with capital Td and Button)

render() {
        return (
            <tr>
                <Td>{this.props.name}</Td>
                <Td>{this.props.ticker}</Td>
                <Td>${this.state.price}</Td>
                <td><Button onClick = {this.handleClick}>Refresh</Button></td>
            </tr>
        );
    }

damn it lookin kinda sexy

CasNWK · July 9, 2021, 1:29pm

Rewrite of Coin.jsx:

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

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

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

    doCoinReferesh(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
            }
        });
        // needs to add the this.doCoinReferesh inside constructor
    }

    render() {
        return (
            <tr>
                <TdCoinRow>{this.props.name}</TdCoinRow>
                <TdCoinRow>{this.props.ticker}</TdCoinRow>
                <TdCoinRow>${this.state.price}</TdCoinRow>
                <TdCoinRow><button onClick={this.doCoinReferesh}>Refresh</button></TdCoinRow>
            </tr>
        );
    }
}

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

Nev · July 10, 2021, 4:29pm

style part (decided to style the button as well:

const TD = styled.td`
    border: 1px solid rgb(45, 58, 79);
    width: 25vh;
    box-shadow: 2px 2px 7px 2px darkgray;
`

const Button = styled.button`
    background: transparent;
    border-radius: 5px;
    border: 2px solid darkturquoise;
    color: darkturquoise;
    margin: 0 1em;
    padding: 0.25em 1em;
`;

and then on return:

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

Konzaih · July 12, 2021, 8:12am

transform into styled component

.coin-row td {
    border: 1px solid #cccccc;
    width: 25vh;
}

into

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

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

ibn5x · July 13, 2021, 6:28am

Styled Components Exercise proposed solution

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



const Button = styled.button`
    background: black;
  border-radius: 3px;
  border: 2px solid darkgrey;
  color: white;
  margin: 0 1em;
  padding: 0.25em 1em;
    `;


    const Td = styled.td`
       border: 1px solid black;
       background-color: lightgrey;
       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 = 0.995 + Math.random() * 0.01;
        this.setState((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>
        );
    }
    
}

walter_w · July 16, 2021, 9:42pm

I don’t like the styled components. I would prefer to keep intellisense.

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

cherryknot · July 19, 2021, 8:44pm

render() {
return (

{this.props.name}
{this.props.ticker}
${this.state.price}

Refresh

);
}

alejandravisa · July 20, 2021, 11:20am

import styled from 'styled-components';

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

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

Bhushan_Pawar · July 24, 2021, 6:10am

import styled from "styled-components";

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

`;

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

HRMS2021 · July 24, 2021, 3:57pm

GM All, run into some challenges, wondering if anyone can help😁
I keep getting this message:

./src/App.jsModule not found: Can't resolve './components/AccountBalance/AccountBalance'

Thank you!

HRMS2021 · July 24, 2021, 11:01pm

Having the same issue, were you able to solve this?