Iâm having a tonne of trouble getting the compiler to find the logo module.
Everything works fine but when I added the logo to the ExchangeHeader.jsx file, it keeps giving me the following error:
./src/components/ExchangeHeader/ExchangeHeader.jsx
Module not found: Can't resolve '.../logo.svg'
When I removed the import and just included it as the path when calling the img, it renders, but gives an image placeholder.
Any help here would be so appreciated. I have no idea whatâs wrong and have spent over an hour trying to figure it out.
p.s. each of the ExchangeHeader.jsx, CoinList.jsx and Coin.jsx files have their own folder in the components folder with a matching subfolder name.
Anyway, hereâs my code!
App.js
import React from 'react';
import CoinList from './components/CoinList/CoinList';
import AccountBalance from './components/AccountBalance/AccountBalance';
import ExchangeHeader from './components/ExchangeHeader/ExchangeHeader';
import styled from 'styled-components';
const Applic = styled.div`
text-align: center;
background-color: rgb(24, 24, 71);
color: #cccccc;
`
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
balance: 10000,
coinData: [
{
name: "Bitcoin",
ticker: "BTC",
price: 9999.99
},
{
name: "Ethereum",
ticker: "ETH",
price: 5000
},
{
name: "Litecoin",
ticker: "LTC",
price: 2000
}
]
}
}
render() {
return (
<Applic>
<ExchangeHeader/>
<AccountBalance amount = {this.state.balance} />
<CoinList coinData = {this.state.coinData}/>
</Applic>
);
}
}
export default App;
ExchangeHeader.jsx
import React, { Component } from 'react';
import styled from 'styled-components';
import logo from '.../logo.svg';
const AppTitle = styled.h1`
font-size: 4rem;
`;
const AppHeader = styled.header`
background-color: #282c34;
min-height: 20vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
color: white;
`
const AppLogo = styled.img`
height: 8rem;
pointer-events: none;
`
export default class ExchangeHeader extends Component {
render() {
return (
<AppHeader>
<AppLogo src={logo} alt="React Logo" />
<AppTitle>
Coin Exchange
</AppTitle>
</AppHeader>
)
}
}
CoinList.jsx
import React, { Component } from 'react';
import Coin from '../Coin/Coin';
import styled from 'styled-components';
const CoinTable = styled.table`
margin: 50px auto 50px auto;
display: inline-block;
font-size: 1.4rem;
`
export default class CoinList extends Component {
render() {
return (
<CoinTable>
<thead>
<tr>
<th>Name</th>
<th>Ticker</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{
this.props.coinData.map(value => <Coin key = {value.ticker} name = {value.name} ticker = {value.ticker} price = {value.price}/>)
}
</tbody>
</CoinTable>
)
}
}
Coin.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;
`;
const Button = styled.button`
background: transparent;
border-radius: 3px;
border: 2px solid palevioletred;
color: palevioletred;
margin: 0 1em;
padding: 0.25em 1em;
`;
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 = () => {
// set the state to a new random variable
const randomPercentage = 0.995 + Math.random() * 0.01;
this.setState( function(oldState) {
return {
price: (oldState.price * randomPercentage)
};
});
}
setInterval(callback, 5000);
}
*/
handleClick(event) {
// We have to prevent the default action from 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><Button onClick = {this.handleClick}>Refresh</Button></td>
</tr>
);
}
}
Coin.propTypes = {
name: PropTypes.string.isRequired,
ticker: PropTypes.string.isRequired,
price: PropTypes.number.isRequired
}
