Welcome to the discussion for the exercise Styled Components
Rewrite the Coin component styles using styled components.
1 Like
Lost some hair before I realized I needed to update every td to Td:
const Td = styled.td`
border: 1px solid #cccccc;
width: 25vh;
`;
3 Likes
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>
);
}
1 Like
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
};
1 Like
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>
);
}
}
1 Like
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>
);
}
}
1 Like
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
}
1 Like
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>
1 Like
@jonsax, sorry I missed this message. Does the error still hold? I signalled updating the quiz back in July after a different case, please let me know if you got your score credited. Thanks.
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>
<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
so couple of days working on this and still cannot get styled components to work in my program. watched some tutorials tried different ways of writing them etc. still not working I get cannot compile. not sure why. tried researching the console error log and cannot find answers. wonder if I did something wrong or accidentally deleted something??? Package.json shows styled components: “^5.2.0” as a dependency… I went back a video to see if I missed something and followed it through. still cannot get it to work. help!
Hi @GalacticBrainBomb9,
Can you paste your code here or some screenshots so that we can help you better ?
A.Malik
1 Like
Remember you can use the “Preformatted Text” Button to encapsulate any kind of code you want to show.
function formatText(){
let words = “I’m a preformatted Text box, Please use me wisely!”
}
Carlos Z.
1 Like
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const Section = styled.section`
border: 1px solid red;
`;
export default class AccountBalance extends Component {
render() {
return (
<Section>
Balance $ {this.props.amount}
</Section>
);
}
}
AccountBalance.propTypes = {
amount: PropTypes.number.isRequired
}
this is the code in my AccountBalance.jsx
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Coin from './components/Coin/Coin';
import AccountBalance from './components/AccountBalance/AccountBalance';
function App() {
return (
<div className="App">
<header className="App-header">
<img src= {logo} alt="React logo" className="App-logo"/>
<h1 className= "App-title">
Coin Exchange
</h1>
</header>
<AccountBalance amount= {10000}/>
<table className= "Coin-table">
<th> Name </th><th> Ticker </th><th> Price </th>
<thread>
<tr>
</tr>
</thread>
<tbody>
<Coin name= "Bitcoin" ticker= "BTC" price= {10806.12}/>
<Coin name= "Ethereum" ticker= "ETH" price= {380.13}/>
<Coin name= "Tether" ticker= "USDT" price= {1.0033}/>
<Coin name= "Ripple" ticker= "XRP" price= {0.2481}/>
</tbody>
</table>
</div>
);
}
export default App;
this is the code in my App.js
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);
}
/*
componentDidMount() {
const callback = () => {
const randomPercentage = 0.995 + Math.random() * 0.01;
this.setState( function(oldState){
return{
price: oldState.price * randomPercentage
}
});
}
setInterval( callback, 1000 );
}
*/
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}>Refreash</button>
</form>
</td>
</tr>
);
}
}
Coin.propTypes = {
name: PropTypes.string,
ticker: PropTypes.string,
price: PropTypes.number,
}
this is the code in my Coin.jsx
I tested your code and it is working. Proof:
This implies that you must have a problem with your setup of styled components.
Try the following:
- Check if in your package.json, styled-components is in the dependencies object with a version 5 or above. If not, execute npm i styled-components --save
- in the folder of the app, run
npm i
without any additional parameters to make sure styled-components code is in your node_modules folder
If this doesn’t work, then go to the documentation of Styled Components and set up a dummy example on your machine. Then make a simple React component work with styled components. Then execute the same steps for the coin exchange.
2 Likes