I was asking myself the same question since components are super useful. Maybe styled-components just help save sometime when styling elements but not ideal for more detailed styling or layouts.
I also noticed that the autocomplete feature for css is missing when writing css code directly from the jsx file, which is helpful to have. It will take some getting used to for this component.
Yes that’s true, that makes sense!
Coin.jsx with styled-components
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const TableDetailCoin = 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) {
event.preventDefault();
const randomPercent = 0.99 + Math.random() * 0.01;
this.setState(
(oldState) => {
return {
price: oldState.price * randomPercent
}
}
);
}
render() {
return (
<tr>
<TableDetailCoin>{this.props.name}</TableDetailCoin>
<TableDetailCoin>{this.props.ticker}</TableDetailCoin>
<TableDetailCoin>{this.state.price}</TableDetailCoin>
<TableDetailCoin>
<form action="#" method="post">
<button onClick={this.handleClick}>Refresh</button>
</form>
</TableDetailCoin>
</tr>
);
}
}
Coin.propTypes = {
name: PropTypes.string.isRequired,
ticker: PropTypes.string.isRequired,
price: PropTypes.number.isRequired
}
import React, { Component } from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
const CoinRow = 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>
<CoinRow>{this.props.name}</CoinRow>
<CoinRow>{this.props.ticker}</CoinRow>
<CoinRow>${this.state.price}</CoinRow>
<CoinRow><form action="#" method="POST"><td><button onClick={this.handleClick}>Refresh</button></td></form></CoinRow>
</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 Section1 = styled.section1 `
background-color: rgb(241, 247, 247);
border-radius: 10%;
border-color: black;
border-style: groove;
width: 25vh;
margin: 50px auto 50px auto;
display: inline-block;
`
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() * .01
this.setState( function(oldState) {
return {
price: oldState.price * randomPercentage
};
});
}
render() {
return (
<Section1>
<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>
</Section1>
);
}
}
Coin.propTypes = {
name: PropTypes.string,
ticker: PropTypes.string,
price: PropTypes.number
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components'
const Td = styled.td`
border: 1px solid;
width: 20vh;
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) {
const randomPercentage = 0.995 + Math.random() * 0.01;
event.preventDefault();
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
}
Coin.jsx:
const Td = styled.td`
font-size: 1em;
border: 1px solid #cccccc;
`;
const Button = styled.button`
background: white;
border-radius: 3px;
border: 2px solid palevioletred;
color: palevioletred;
margin: 0 1em;
padding: 0.25em 1em;
`;
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.handlClick}>Refresh</Button>
</form>
</Td>
</tr>
);
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>
);
AccountBalance.jsx
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 {
...
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>
...
nice. i would recommend getting the vs code extention prettier. when you press ctrl+S it will automatically format your code. so it will fix the misalignmen tof your closing tr tag and button element. this is good when you write large files where readbility is important. prettier is a life saver for styled components that take in larger number of props
@mcgrane5 thanks I’ve installed prettier extension and turn on “format on save”, this helped a lot 
brilliant. and no worries
const TableD = styled.td`
border: 1px solid grey;
width: 25vh;
`
render() {
return (
<tr>
<TableD>{this.props.name}</TableD>
<TableD>{this.props.ticker}</TableD>
<TableD>${this.state.price}</TableD>
<TableD>
<form action="#" method="POST">
<button onClick={this.handleClick}>Refresh</button>
</form>
</TableD>
</tr>
);
}
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>
);
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
//import './AccountBalance.css';
import styled from 'styled-components';
const Section = styled.section`
border: 1px solid red;
font-size: 2rem;
text-align: left;
padding: 1.5rem 0 1.5rem 5rem;
`;
export default class AccountBalance extends Component {
render() {
return (
<Section>
Balance: ${this.props.amount}
</Section>
);
}
}
AccountBalance.propTypes = {
amount: 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 #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) {
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
}
import React, { Component } from 'react';
import styled from "styled-components";
import PropTypes from "prop-types";
const CoinTD = styled.section `
border: 1px solid #ccc;
width: 25vh;
display: inline-block;
font-size: 1.4rem;
`;
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 default of submitting 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">
<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>
);
};
}
Coin.propTypes = {
name: PropTypes.string.isRequired,
ticker: PropTypes.string.isRequired,
price: PropTypes.number.isRequired
}
first import Styled Components
import styled from "styled-components";
then define a new style component, TD, as
const TD = styled.td`
border: 1px solid white;
width: 25vh;
`;
then inside the return function, replace the old element with the React Styled Component we just defined:
<TD>{this.props.name}</TD>
<TD>{this.props.ticker}</TD>
<TD>${this.state.price}</TD>
<TD>
<form action="#" method="GET">
<button onClick={this.handleClick}>Refresh</button>
</form>
</TD>
Here’s my code:
import React, { Component } from 'react'
import PropTypes from 'prop-types';
import styled from 'styled-components';
const Td = styled.td`
border: 1px solid white;
width: 25vh;
font-size: 1.4rem;
`;
And then the render method
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>
);
}
one tip i will give, is that styled components also give you the opportunity to name your JSX better so you could have and instead of and etc.