enter image description hereIn network tab, it shows a books file with 208 status code but can't see any changes in the ui. I'm new to React and not so good at mapping over arrays.
Home.jsx ->
import React, { useEffect, useState } from "react";
import axios from "axios";
import Spinner from "./Spinner";
import { Link } from "react-router-dom";
import { AiOutlineEdit } from "react-icons/ai";
import { BsInfoCircle } from "react-icons/bs";
import { MdOutlineAddBox, MdOutlineDelete } from "react-icons/md";
const Home = () => {
const [books, setBooks] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
axios
.get("http://localhost:5555/books")
.then((response) => {
setBooks(response.data);
console.log(response.data);
setLoading(false);
})
.catch((error) => {
console.log(error);
setLoading(false);
});
}, []);
return (
<div className="p-4">
<div className="flex justify-between items-center">
<h1 className="text-3xl my-8">Books Catalogue</h1>
<Link to="/books/create">
<MdOutlineAddBox className="text-sky-800 text-4xl" />
</Link>
</div>
{loading ? (
<Spinner />
) : (
<table className="w-full border-separate border-spacing-2">
<thead>
<tr>
<th className="border border-slate-600 rounded-md">No</th>
<th className="border border-slate-600 rounded-md">Title</th>
<th className="border border-slate-600 rounded-md max-md:hidden">
Author
</th>
<th className="border border-slate-600 rounded-md max-md:hidden">
Publish Year
</th>
<th className="border border-slate-600 rounded-md ">
Operations
</th>
</tr>
</thead>
<tbody>
{books?.map((book, index) => {
<tr key={book._id} className="h-8">
<td className="border border-slate-700 rounded-md text-center">
{index + 1}
</td>
<td className="border border-slate-700 rounded-md text-center">
{book.title}
</td>
<td className="border border-slate-700 rounded-md text-center max-md:hidden">
{book.author}
</td>
<td className="border border-slate-700 rounded-md text-center max-md:hidden">
{book.publishYear}
</td>
<td className="border border-slate-700 rounded-md text-center ">
<div className="flex justify-center gap-x-4">
<Link to={`/books/details/${book._id}`}>
<BsInfoCircle className="text-2xl text-green-800" />
</Link>
<Link to={`/books/edit/${book._id}`}>
<AiOutlineEdit className="text-2xl text-yellow-600" />
</Link>
<Link to={`/books/delete/${book._id}`}>
<MdOutlineDelete className="text-2xl text-red-600" />
</Link>
</div>
</td>
</tr>;
})}
</tbody>
</table>
)}
</div>
);
};
export default Home;
index.js (backend) ->
import express from 'express';
import {PORT, MONGOURL} from './config.js';
import mongoose from 'mongoose';
import { Book } from './models/bookModel.js';
import booksRoute from './routes/booksRoute.js';
import cors from 'cors';
const app = express();
// middleware for parsing req body
app.use(express.json());
//middleware for cors policy
// app.use(cors());
app.use(
cors({
origin: 'http://localhost:5173',
methods: ['GET', 'POST','PUT','DELETE'],
allowedHeaders: ['Content-Type','Access-Control-Allow-Origin'],
optionsSuccessStatus: 200
})
);
// app.get('/', (req, res) => {
// console.log(req);
// return res.status(200).send('Welcome to Bookstore')
// });
app.use('/books', booksRoute);
mongoose.connect(MONGOURL)
.then(() => {
console.log('DB connection established')
app.listen(PORT, () => {
console.log(`Server is running on ${PORT}`)
});
})
.catch((e) => {
console.log(e);
})
Routes ->
import express from "express";
import { Book } from "../models/bookModel.js";
const router = express.Router();
//Route for add a book to the db
router.post('/', async (req,res) => {
try {
if (
!req.body.title || !req.body.author || !req.body.publishYear
) {
return res.status(400).send({message: 'Send all required fields: title,author,publishYear'});
}
const newBook = {
title: req.body.title,
author: req.body.author,
publishYear: req.body.publishYear
};
const book = await Book.create(newBook);
return res.status(201).send(book);
} catch (error) {
console.log(error.message)
res.status(500).json({message: error.message})
}
});
//Route for get all books from the db
router.get('/', async (req,res) => {
try {
const books = await Book.find();
return res.status(208).send(books);
} catch (error) {
res.status(500).send({message: error.message});
}
});
//Route for get a single book from db
router.get('/:id', async (req,res) => {
try {
const {id} = req.params;
const book = await Book.findById(id);
res.status(200).send(book);
} catch (error) {
res.status(500).send({message: error.message});
}
});
//Route for Update book params
router.put('/:id', async (req,res) => {
try {
if (
!req.body.title || !req.body.author || !req.body.publishYear
) {
return res.status(400).send({message: 'Send all required fields: title,author,publishYear'});
}
const {id} = req.params;
const result = await Book.findByIdAndUpdate(id, req.body);
if (!result) {
res.status(404).send({message: 'Book not found'})
}
return res.status(201).send({message: 'Book updated Successfully'})
} catch (error) {
res.status(500).send({message: error.message});
}
});
//Route for delete a book
router.delete('/:id', async (req,res) => {
try {
const book = await Book.deleteOne({_id: req.params.id});
if (!book) {
res.status(404).send('Book not found')
}
res.status(200).send({message: 'Book deleted successfully'})
} catch (error) {
res.status(500).send({message: 'Inquiry error'});
}
});
export default router
I want to display data as a table in the homepage and I've tried changing cors values and origins but still the same.
You should return the value within your map callback. This is because the callback passed in uses the braces - and therefore does not return anything.
{books?.map((book, index) => {
return(
<tr key={book._id} className="h-8">
<td className="border border-slate-700 rounded-md text-center">
{index + 1}
</td>
<td className="border border-slate-700 rounded-md text-center">
{book.title}
</td>
<td className="border border-slate-700 rounded-md text-center max-md:hidden">
{book.author}
</td>
<td className="border border-slate-700 rounded-md text-center max-md:hidden">
{book.publishYear}
</td>
<td className="border border-slate-700 rounded-md text-center ">
<div className="flex justify-center gap-x-4">
<Link to={`/books/details/${book._id}`}>
<BsInfoCircle className="text-2xl text-green-800" />
</Link>
<Link to={`/books/edit/${book._id}`}>
<AiOutlineEdit className="text-2xl text-yellow-600" />
</Link>
<Link to={`/books/delete/${book._id}`}>
<MdOutlineDelete className="text-2xl text-red-600" />
</Link>
</div>
</td>
</tr>)
})}
Simple callback (without braces)
[1,2,3].map((x)=>x+x)
Outputs:
[2,4,6]
Incorrect complex callback (with braces)
[1,2,3].map((x)=>{
x+x
})
Outputs:
[undefined, undefined, undefined]
Correct complex callback (with braces)
[1,2,3].map((x)=>{
return x+x
})
Outputs:
[2,4,6]