//component
const Clientslist = () => {
const classes = useStyles()
axios.get('/api/clients').then(resp => {
const {clients} = resp.data
console.log(clients) // i get the data on the terminal
})
return(
...
{
clients.map(client => ( //clients is not defined
<Grid key={client._id} item xs={12} sm={6} md={4}>
<Card
clientName={client.clientName}
...
)
}
//controller
const get = async (req, res) => {
await dbConnect()
const clients = await ClientsModel.find()
res.status(200).json({ success: true, clients})
}
I thing my request code is poor, if someone helps me fix the problem and even a code refactor for a better and clean code. It would be great. Thanks.
your clients variable is defined inside the scope inside the axios callback, and can't be accessed from outside, but if you modified it alittle bit, you can save it inside a local state variable, like: (3 new lines are marked with //***)
//component
const Clientslist = () => {
const classes = useStyles()
//*** Adding clients var with initial value as empty array
const [clients, setClients] = useState([]) //***
axios.get('/api/clients').then(resp => {
const {clients} = resp.data
console.log(clients) // i get the data on the terminal
setClients(clients) //*** this would save the new clients in the sate
})
In your code, clients variable is in the local scope of axios thus not accessible in the return statement. As you are using React functional Component, we can use useState hook which helps us to track the state of the variable
//component
import React, { useState } from 'react';
const Clientslist = () => {
const classes = useStyles();
const [clients, setClients] = useState([]);// empty array denotes initial state
axios.get('/api/clients').then(resp => {
const {clients} = resp.data
console.log(clients)
setClients(clients); // sets the state of variable clients to the received data
})
return(
...
{
clients.map(client => (// updated clients can be used here to display .Also check for the valid response before mapping
<Grid key={client._id} item xs={12} sm={6} md={4}>
<Card
clientName={client.clientName}
...
)
}
Helpful resources : https://reactjs.org/docs/hooks-state.html https://www.geeksforgeeks.org/what-is-usestate-in-react/