error-The NotesList is not coming
:3000/api/Notes:1
Failed to load resource: the server responded with a status of 404 (Not Found)
App.js
import './App.css';
import React from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
//import { NotesList, NotesInsert, NotesUpdate } from './pages'
import { NotesList } from './pages'
function App() {
return (
<div>
<h1>Note-making</h1>
<Router>
<Switch>
<Route path="/Note/list" exact component={NotesList} />
</Switch>
</Router>
</div>
);
}
export default App;
NotesList.js
import React, { Component } from 'react'
import ReactTable from 'react-table'
import api from '../api'
import styled from 'styled-components'
import 'react-table/react-table.css'
class NotesList extends Component {
constructor(props) {
super(props)
//isLoading - boolean value indicating if component is currently loading data
this.state = {
notes: [],
columns: [],
isLoading: false,
}
}
//see above for explanation
componentDidMount = async () => {
//isLoading - boolean value indicating if component is currently loading data
this.setState({ isLoading: true })
await api.getAllNotes().then(notes =>
{
this.setState({
notes: notes.data.data,
isLoading: false,
})
})
}
render() {
const { notes, isLoading } = this.state
const columns = [
{
Header: 'ID',
accessor: '_id',
filterable: true,
},
{
Header: 'Name',
accessor: 'name',
filterable: true,
},
{
Header: 'Topic',
accessor: 'topic',
// Cell: props => <span>{props.value.join(' / ')}</span>,
},
]
// This code is checking if the notes array is empty and if it is, it sets
// the showTable variable to false.If showTable is true, it renders
// the <ReactTable> component, otherwise it does not.
let showTable = true
if (!notes.length) {
showTable = false
}
return (
<div>
<h1>abcd</h1>
{showTable && (
<ReactTable
data={notes}
columns={columns}
loading={isLoading}
defaultPageSize={10}
showPageSizeOptions={true}
minRows={0}
/>
)}
</div>
)
}
}
export default NotesList