Untitled
unknown
plain_text
2 years ago
3.0 kB
2
Indexable
Never
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