Anyone know what this error could be
/cannot POST
and the console says:
POST http://localhost:3000/ 404 (Not Found)
I’m currently doing the react course and stuck in the lifting state up chapter.
I checked the forum and one person had the same issue and his was because he made and error, i’ve checked my code word for word, it’s identical but still have that issue
Here’s my App.js
import React from 'react';
// import './App.css';
import CoinList from './Components/CoinList/CoinList';
import AccountBalance from './Components/AccountBalance/AccountBalance';
import ExchangeHeader from './Components/ExchangeHeader/ExchangeHeader';
import styled from 'styled-components';
import {v4 as uuidV4} from 'uuid';
import PropTypes from 'prop-types';
const Div = styled.div `
text-align: center;
background-color: rgb(0, 83, 121);
color: #cccccc
`;
class App extends React.Component {
constructor(props){
super(props);
// this.handleRefresh = this.handleRefresh.bind(this);
this.state ={
balance: 10000,
coinData: [
{
name: 'Bitcoin',
ticker: 'BTC',
price: 9999.99
},
{
name: 'Ethereum',
ticker: 'ETH',
price: 299.99
},
{
name: 'Tether',
ticker: 'USDT',
price: 0.999
},
{
name: 'Ripple',
ticker: 'XRP',
price: 0.19
},
{
name: 'BitcoinCash',
ticker: 'BCH',
price: 99.9
},
]
}
this.handleRefresh = this.handleRefresh.bind(this);
}
handleRefresh(valueChangeTicker){
const coin = this.state.coinData.find(({ticker}) => ticker === valueChangeTicker);
console.log( coin );
}
render(){
return (
<Div className="App">
<ExchangeHeader ExchangeHeader={ this.state.ExchangeHeader}/>
<AccountBalance amount={this.state.balance}/>
<CoinList coinData={ this.state.coinData} handleRefresh={this.handleRefresh}/>
</Div>
);
}
};
export default App;
here’s my coin.js
import React, { Component } from 'react'
import styled from 'styled-components';
import PropTypes from 'prop-types';
const Td = styled.td`
border: 1px solid white;
width: 15vh;
`
export default class Coin extends Component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(event){
// Prevent default action of submitting form
event.preventDefault();
this.props.handleRefresh(this.props.ticker);
/*
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.props.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
}
Here’s my coinlist.jsx
import React, { Component } from 'react'
import Coin from '../Coin/Coin';
import styled from 'styled-components';
const Table = styled.table `
margin: 50px auto 50px auto;
display: inline-block;
font-size: 1.4rem;
`;
export default class CoinList extends Component {
render() {
return (
<Table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Ticker</th>
</tr>
</thead>
<tbody>
{
this.props.coinData.map(({name, ticker, price}) =>
<Coin key ={ticker}
handleRefresh= {this.props.handleRefresh}
name={name}
ticker={ticker}
price={price} />
)
}
</tbody>
</Table>
)
}
}