//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.

CodePudding user response：

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
  })

CodePudding user response：

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/