Styled Components exercise

George · December 26, 2020, 4:57pm

Styled Component:

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

Rendering Component:

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

Ishoboy · January 4, 2021, 11:53am

Coin.jsx

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

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

scroll down to the render part…

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

Result:

bdoherty · January 14, 2021, 3:12pm

import styled from 'styled-components';

const Td = styled.td`
    border: 1px solid #cccccc;
    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>

camarosan · January 16, 2021, 10:15pm

Haysoose · January 23, 2021, 5:57pm

import React, { Component } from 'react';
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.name}</Td>
                <Td>{this.props.name}</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
}

Uyan · January 25, 2021, 9:51pm

Inserted between import and export:

Coin.jsx

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

In the render section of Coin.jsx:

Coin.jsx pt. 2

render() {
        return (
            <tr className="coinRow">
                <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>
        );
    }

The final result:

Coin Exchange Homepage

mjwatson10 · January 27, 2021, 8:24am

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

CryptoDev · February 2, 2021, 5:44pm

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

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

Spartak · February 3, 2021, 11:20am

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

jelle_van_der_meer · February 8, 2021, 3:48pm

i have rewritten the table cells and replaced it from a normal td to a Td with a capital letter so i could acces the table cells with the styled component function. If you don’t do this the styled components function will not know what to pick.
Then i styled the components with:

const Td = styled.td`
  border: 1px solid red;
  padding: 0.5rem 3rem 0.5rem;
`;

MARTIS · February 9, 2021, 1:35pm

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

Emmerich · February 10, 2021, 12:08pm

const Td = styled.td`

text-align: center;

border: 1px rgb(166, 187, 189) ridge;

width: 33.33vw;

font-size: 1.5em;

`;

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

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

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

           <Td>            

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

           </Td>

lucas · February 10, 2021, 4:08pm

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

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

export default class Coin extends Component {
   constructor(props) {
      super(props)
      this.state = {
         price: this.props.price
      }
      this.refreshPrice = this.refreshPrice.bind(this)
   }
   refreshPrice(event) {
      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><button onClick={this.refreshPrice}>Refresh</button></Td>
         </tr>
      )
   }
}

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

derdis14 · February 15, 2021, 5:46pm

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

const Td = styled.td`
    border: 1px solid #282c34;
    width: 10rem;

    &.Coin-refresh {
        border-style: none;
        width: auto;
    }
`;

const RefreshButton = styled.button`
    display: block;
    width: 100%;
    height: 2rem;
`;

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

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

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

    //...
}

zach · February 16, 2021, 5:29pm

At the top of Coin.jsx:

import styled from 'styled-components';

const Td = styled.td`
    border: 1px solid whitesmoke;
`

Newly updated render function for “coin-row”:

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

Julie66 · February 24, 2021, 7:48pm

Solution:

const Td = styled.td`

border: 1px solid #cccccc;

width: 25vh

`;

KryptoS · February 28, 2021, 5:12am


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

const Td = styled.td `
  font-size: 1rem;
  background-color:#E1F2C4;
  border: 1px solid #1b1919;
`;

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="#" 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
}

Dominykas_Pozleviciu · March 4, 2021, 4:03pm

const Tr = styled.tr`

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


`;

Dominykas_Pozleviciu · March 4, 2021, 4:32pm

I think I made a mistake here because with Tr I cannot change the width.


const Td = styled.td`

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


`;

cge5009 · March 9, 2021, 6:40pm

I am struggling with same issue that @GalacticBrainBomb9 suffered from. I however have not be able to solve it with your recommended npm i suggestion. My code is identical to that which was posted and from my research it seems to be an issue with react having two dependency files that don’t match. My package.json file seems to have the same version so I am unsure where this dual dependency is coming from. Anyone with any suggestions on how to resolve this? Thanks