import styled from 'styled-components'; const Td = styled.td` border: 1px solid white; width: 15vh; `; 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> ) }
Declaring the styled element
const TD = styled.td` {
border: 1px solid #cccccc;
width: 25vh;
}`;
Using the newly styled element in render()
<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>
I am running into this error as well. TypeError: styled_components__WEBPACK_IMPORTED_MODULE_2__.default.hdr is not a function
Strangley enough, it works in coin.jsx but does not work when I try to make a styled component for the header.jsx. I looked through the forums but could not find a solution. I check installation and all, but yea as I said, it works for the coin.jsx but not in header.jsx. whats the deal here?
import styled from 'styled-components';
const Hdr = styled.dr ` {
border: 1px solid #cccccc;
width: 25vh;
}
`;
Did you find a solution? Having the same issue here
Through my readings I determined it would take more time than be worth to locate and rewrite library files with my current aptitude of the systems. I decided to just remove styled components from my project and instead do a stylesheet using CSS.
There is no html tag called “dr” therefore, it breaks. If you use the styled.div or styled.p , it would work. dr is not a html element.
import React, { Component } from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
const CoinRow =styled.td`
border:3px solid #10b8eb;
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= .995+ Math.random()*.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">
<button onClick={this.handleClick}>Refresh</button>
</form>
</CoinRow>
</tr>
);
}
}
const CoinTd = styled.td`
border: 1px solid #cccc;
width: 25vh;
`;
render(){
return(
<tr>
<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>
);
}
const Td = styled.td font-size: 1.5rem; border: 1px solid black; width: 25vh;
;
Coin.jsx
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
/*
.coin-row td {
border: 1px solid #f703ff;
width: 25vh;
}
*/
const CoinRow = styled.td`
border: 1px solid;
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">
<button onClick={this.handleClick}>Refresh</button>
</form>
</CoinRow>
</tr>
);
}
}
Coin.propTypes = {
name: PropTypes.string.isRequired,
ticker: PropTypes.string.isRequired,
price: PropTypes.number.isRequired
}
const TDR = styled.td border: 1px solid #cccccc; width: 25vh;
;
I added designs on the table headings directly in the App.js file and it works also
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Coin from './components/Coin/Coin';
import AccountBalance from './components/AccountBalance/AccountBalance';
import styled from 'styled-components';
const TitleDetails = styled.th`
border: 2px solid burlywood;
width: 25vh;
background-color: black;
color: white;
`;
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="React logo" />
<h1 className = "App-title">
Coin Exchange
</h1>
<p className = "App-subtitle">
by: Xyz Fiegalan
</p>
</header>
<AccountBalance amount = {10000} />
<table className = "coin-table">
<thead>
<tr>
<TitleDetails>Name</TitleDetails>
<TitleDetails>Ticker</TitleDetails>
<TitleDetails>Price</TitleDetails>
</tr>
</thead>
<tbody>
<Coin name="Bitcoin" ticker="BTC" price ={60000}/>
<Coin name="Ethereum" ticker="ETH" price ={2500}/>
<Coin name="Cardano" ticker="ADA" price ={1.5}/>
<Coin name="Binance" ticker="BNB" price = {600}/>
</tbody>
</table>
</div>
);
}
export default App;
AccountBalance.jsx
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const Section1 = styled.section`
margin: auto;
box-shadow: 2px 2px 7px 1px black;
background-color: rgb(253, 239, 218);
float: center;
font-size: 1.5rem;
box-sizing: content-box;
font-weight: bold;
`;
export default class AccountBalance extends Component {
render() {
return (
<Section1 className = "balance">
Current Balance is: {this.props.amount} USD
</Section1>
);
}
}
AccountBalance.propTypes = {
amount: PropTypes.number.isRequired
}```
Coin.jsx
import React, { Component } from 'react'
import styled from 'styled-components';
import PropTypes from 'prop-types';
const RowDetails = styled.td`
border: 2px solid burlywood;
width: 25vh;
background-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) {
// 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>
<RowDetails>{this.props.name}</RowDetails>
<RowDetails>{this.props.ticker}</RowDetails>
<RowDetails>${this.state.price}</RowDetails>
<RowDetails>
<form action = "#" method = "POST">
<button onClick = {this.handleClick}>Refresh</button>
</form>
</RowDetails>
</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 Td = styled.td`
border: 2px solid darkslategray;
width: 30vh;
`;
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 from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const Td = styled.td`
border: 1px solid #cccccc;
width:12vh;
font-size:0.8rem;
background-color: #e253dd;
border-radius:25px;
`;
class Coin extends React.Component {
render() {
return (
<tr className="coinRow">
<Td>{this.props.name}</Td>
<Td>{this.props.ticker}</Td>
<Td>{this.props.priceGBP}</Td>
<Td>{this.props.priceETH}</Td>
</tr>
);
}
}
Coin.propTypes = {
name: PropTypes.string.isRequired,
ticker: PropTypes.string.isRequired,
priceGBP: PropTypes.number.isRequired,
priceETH: PropTypes.number.isRequired
};
export default Coin;
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 #cccc;
width: 25wh;
`
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 = { //typechecking
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 Td = styled.td`
width: 25vh;
border: 1px solid #cccccc;
`;
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 randomProcentage = 0.995 + Math.random() * 0.01;
this.setState(function(oldState){
return {
price: oldState.price * randomProcentage
};
});
}
render() {
return (
<tr>
<Td>{this.props.name}</Td>
<Td>{this.props.tiker}</Td>
<Td>${this.state.price}</Td>
<Td>
<form action="#" method = "POST">
<button onClick={this.handleClick}>Refres</button>
</form>
</Td>
</tr>
)
}
}
Coin.propTypes = {
name: PropTypes.string.isRequired,
tiker: PropTypes.string.isRequired,
price: PropTypes.number.isRequired
}
const CoinTd = styled.td`
border: 1px solid #cccccc;
width: 25hw;
`;
render() {
return (
<tr className="coin-row">
<CoinTd>{this.props.name}</CoinTd>
<CoinTd>{this.props.ticker}</CoinTd>
<CoinTd>${this.state.price}</CoinTd>
<td>
<form action="#" method="POST">
<button onClick={this.handleClick}>Refresh</button>
</form>
</td>
</tr>
)
}
Here’s my answer:
import styled from 'styled-components';
const Td = styled.td`
border: 1px solid #cccccc;
width: 25vh;
`;
VsCode extension for styled components:
https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components