Try to make a request to API endpoint using reactjs hook - reactjs

Question

Endpoint
const mongoose = require("mongoose");
const CreateBio = mongoose.model("bios");
// exports.baseRoute = async (req, res) => {
// res.send("Server Running");
// };
exports.createBio = async (req, res) => {
console.log(req.body);
let userBio = new CreateBio({
userBio: req.body.userBio
});
console.log('userBio:', userBio);
await userBio.save((err, data) => {
if (err) {
// if there is an error send the following response
res.status(500).json({
message: "Something went wrong, please try again later.",
});
} else {
// if success send the following response
res.status(200).json({
message: "Bio Created",
data,
});
}
});
};
exports.displayBio = async (req, res) => {
// get id from URL by using req.params
let userBioID = req.params.id;
console.log(userBioID);
// we use mongodb's findById() functionality here
await CreateBio.findById({ _id: userBioID }, (err, data) => {
if (err) {
console.log(err)
res.status(500).json({
message: "Something went wrong, please try again later.",
});
} else {
console.log(data);
res.status(200).json({
message: "bio found",
data,
});
}
});
};
Frontend
import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import { isExpired, decodeToken } from "react-jwt";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import Container from "react-bootstrap/Container";
import Card from "react-bootstrap/Card";
import "./tests/home-test.css";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Navi from "../Navigation/nav";
import Image from "react-bootstrap/Image";
import axios from "axios";
import Nav from "react-bootstrap/Nav";
//import { displayBio } from './displayBio';
// import "./login.css";
const Home = () => {
//const [someProperty, setSomeProperty] = useState([]);
const [userBio, setBio] = useState("")
const history = useHistory();
const loadBio = async () => {
try{
let res = await axios.get('http://localhost:5000/displaybio/:id')
setBio(res.data.data.userBio)
console.log(res.data.data.userBio)
} catch (err){
console.log(err)
}
}
useEffect(() => {
// console.log("use effect working!");
if (!window.localStorage.getItem("token")) {
//redirect to login
console.log("redirect to login");
history.push("/");
}
if (window.localStorage.getItem("token")) {
const isMyTokenExpired = isExpired(window.localStorage.getItem("token"));
console.log(isMyTokenExpired);
if (isMyTokenExpired) {
console.log("redirect to login");
history.push("/");
}
const myDecodedToken = decodeToken(window.localStorage.getItem("token"));
console.log(myDecodedToken);
}
// fetch('http://localhost:5000/displayBio/:id', {
// method: "GET"
// })
// .then(res => res.json())
// .then(response => { setBio(response.item)
// })
loadBio()
}, []);
return (
<div className="Home">
<Container className="homeContainer shadow mt-2">
<Row>
<Col className="d-flex align-items-center">
<span>Home (You are logged in)</span>
</Col>
<Col className="">
<div className="d-flex align-items-center justify-content-end">
<Button
className="logoutBtn mb-2 mt-2"
onClick={(e) => {
window.localStorage.removeItem("token");
this.props.history.push("/");
}}
>
Logout
</Button>
</div>
</Col>
</Row>
<Form>
<Card className="profileCard">
<Card.Body>
<Card.Title className="text-center">
<div>
<Navi />
</div>
<h1>
Welcome Back <span className="text-success">Username</span>
</h1>
</Card.Title>
<Container>
<Row>
<Col className="d-flex justify-content-center col-12">
<div className="profilepic text-center">
Add a Profile Picture here!
</div>
</Col>
<Col className="mt-n5">
<div className="col-12 text-center">
<Card.Text
className="cardText text-center col-lg-10"
value={userBio}
//onChange={setBio}
></Card.Text>
<div className="mt-3">
<Button
className="shareVsBtn"
variant="success"
type="submit"
href="/sharewall"
>
Shared Verse
</Button>
</div>
<div className="mt-3">
<Button
className="postSubBtn mb-3"
variant="success"
type="submit"
href="/postverse"
>
Post a Verse
</Button>
</div>
</div>
</Col>
</Row>
</Container>
</Card.Body>
</Card>
</Form>
</Container>
</div>
);
}
export default Home;
Every time I try to send the request I end up getting a 500 error.500
I cannot seem to get it to console.log any of the information on the front end. I am not sure if I am not just formatting my hook right or not. I am able to get my response on the backend using postman. But my get request from the front end is not going through. Stating that I am having failure at casting {_id :id} at path _id for my model bios.

Answer 1

In order for you to see your userBio you need to have the handlebars inside the Card.Text selector (I omitted the className for this example). This will allow you to see the data in the front end. This is a result by taking the id from mongo and pasting it in the http address i.e: http://localhost:5000/displaybio/123456789.
<Card.Text value={userBio.id}>{userBio}</Card.Text>
In your loadBio you need to console.log(res); to find where the code is in the data object. In this case: setBio(res.data.data.userBio). This the answer to see the data displayed, Cody still needs an answer on how to grab the data dynamically by the id. displaybio/${id} doesn't work.