Make sure your import file directory is in the right location. This error is usually when the path location is wrong in your import statement.
Hope this helps 
1 Like
Thank you @Malik - I will take a look at it, and make sure file directory location are on the right spot.
Lost sleep over this exercise - LOL
Challenges: File directories were on the wrong spot, learned a lot from this mistake.
const Td = styled.td`;
border; 1px solid #cccccc;
width; 25vh;
`;
1 Like
const StyledTd = styled.td `
border: 1px solid #e9ebe4;
width: 25vh;
`
render() {
return (
<tr>
<StyledTd>{this.props.name}</StyledTd>
<StyledTd>{this.props.ticker}</StyledTd>
<StyledTd>${this.state.price}</StyledTd>
<StyledTd>
<form action="#" method="POST">
<button onClick={this.handleClick}>Refresh</button>
</form>
</StyledTd>
</tr>
);
}
1 Like
import styled from 'styled-components';
const td = styled.td`
border: 1px solid #cccccc;
width: 25vh;
`;
render() {
return (
<tr className="coin-row">
<td>{this.props.name}</td>
<td>{this.props.ticker}</td>
<td>${this.state.price}</td>
<td><button onClick={this.handleClick}>Refresh</button></td>
</tr>
);
}
1 Like
The styling part:
const Td = styled.td`
border: 1px solid rgb(64, 224, 190);
width: 35vh;
padding: 2.5px 10px 2.5px 10px;
`;
And the rendered part:
<tr className="coinRow">
<Td>{this.props.name}</Td>
<Td>{this.props.ticker}</Td>
<Td>${this.state.price}</Td>
<Td>
<form axtion="#" method="POST">
<button onClick={this.handlleClick} >Refresh</button>
</form>
</Td>
</tr>
And I also imported the styled-components at the top of the jsx file.
1 Like
const Td = styled.td` {
border: 1px solid yellow;
width: 25vh;
}`;
1 Like
import styled from 'styled-components';
const Td = styled.td`
border: 2.5px solid #cccc;
width: 25vh;
`;
1 Like
Styled Coin component with Styled Components:
import React, { Component } from 'react';
import PropTypes from "prop-types";
import styled from 'styled-components';
const Td = styled.td`
border: 1px solid grey;
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>
)
}
1 Like
const TD = styled.td `
border: 1px solid #cccccc;
width: 25vh;
`;
render() {
return (
<tr>
<TD>{this.props.name}</TD>
<TD>{this.props.symbol}</TD>
<TD>{"$" + this.state.price}</TD>
<TD>
<form action="#" method="POST">
<button onClick={this.handleClick}>Refresh</button>
</form>
</TD>
</tr>
);
}
Here’s my solution
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;
`;
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 randPercentage = 0.995 + Math.random() * 0.01;
this.setState( oldState => {
return {
price: oldState.price * randPercentage
};
});
}
render() {
return (
<tr className="coin-row">
<Td>{this.props.name}</Td>
<Td>${this.state.price}</Td>
<Td>{this.props.ticker}</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
}
Hello, I was just wondering why the “styled-components” are great to use? For me, it looks almost like we are using internal css in html, but in the jsx file and when we put a lot of css in the jsx, I think it becomes a bit of a mess in the code. Would it not be better to just have a separate css file with all the styling? it would make the code much more organized.
I’m just trying to understand the point of using “styled-components”. 
Im having trouble with this. My styled command is working. I have put a red box around the rows. The coin name, ticker symbol, dollar sign, amount, and refresh button are squeezed together. I have searched CSS website for several days to figure out how to separate the components, without success. Can someone give me a little more direction??
Thanks,
got it!! I was making this way to hard!
const Td = styled.td`
border: 1px solid #00FFE6;
width: 50vh;
`;
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= "B" method= "post">
<button onClick={this.handleClick}>Refresh</button>
</form>
</Td>
</tr>
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
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) {
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
}
@zsolt-nagy Hello man, noob question, could you tell me why i cant see (is blink) my local host since i downloaded styled components? thanks
import React, { Component } from 'react'
import PropTypes from 'prop-types';
import styled from 'styled-components' ;
const Td = styled.td`
border: 2px;
`;
export default class Coin extends Component {
constructor(props) {
super(props);
this.state = {
price: this.props.price
}
this.handleClick = this.handleClick.bind(this);
}
const Td = styled.td`
font-size: 20px;
border: 1px solid white;
width: 60vh;
`;
Tip: the name of the const must start with capital letter or it wont work, and replace your tags with the const name to refer to the style
This was tough, but finally got it in the end. 
Styled Components
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const CoinTd = 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>
<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
}
My solution:
import styled from 'styled-components';
const Td = styled.td`
border: 1px solid #ccc;
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>
);
}