Styled Components exercise

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

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:

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

image
image

1 Like
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
}
1 Like

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

3 Likes
const TD = styled.td`
  border: 1px solid#cccccc;
  width: 25vh;
`;
3 Likes
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>
        );
    }
3 Likes
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>
            );

3 Likes

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

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

    //...
}
2 Likes

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

Solution:

const Td = styled.td`

border: 1px solid #cccccc;

width: 25vh

`;
2 Likes

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
}
1 Like
const Tr = styled.tr`

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


`;
2 Likes

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;


`;

1 Like

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

3 Likes