Cannot fetch data for a component from an API

Hello, I want to fetch data that I successfully collect from a mongodb database and then display it in a dropdown component. But I am unable to receive it and receive undefined instead. This is my API, a [...param].js in folder api/calcCart:

async function handler(req, resp){
   // mongoose code
 const usersArray = await userscollection.findOne(query);
    **return resp.status(200).send({data: usersArray})**
}
 
export default handler

async function handler(req, resp){
   // mongoose code
 const usersArray = await userscollection.findOne(query);
    **return resp.status(200).send({data: usersArray})**
}
 
export default handler

This is the function where I fetch this usersArray. It is in index.js:

const calculateCart = async (ipAddress, browserName) =>{
         
        const resp = await fetch(`/api/calcCart/${ipAddress}/${browserName}`, {
          method: 'POST'
        })
        .then((res) => {console.log("SUCCESS in Fetching Product Data", res)
        
      
      }).then(data =>{console.log("SUCCESS in Resolving Product Data:",data)})
        .catch(e => console.log("ERROR:" + e))
  
      }

const calculateCart = async (ipAddress, browserName) =>{
         
        const resp = await fetch(`/api/calcCart/${ipAddress}/${browserName}`, {
          method: 'POST'
        })
        .then((res) => {console.log("SUCCESS in Fetching Product Data", res)
        
      
      }).then(data =>{console.log("SUCCESS in Resolving Product Data:",data)})
        .catch(e => console.log("ERROR:" + e))
  
      }

This is the component where this function is called, also defined in index.js:

const Drop = ({ open }) => {
  return (
    <div >
      {open === true ? (
        <div className="dropdown_container">
          <div
            className="dropdown_item"
            onClick={
            calculateCart(props.ip, props.browser)
           >
            Fetched data
          </div>
  
        </div>
      ) : null}
    </div>
  );
};

const Drop = ({ open }) => {
  return (
    <div >
      {open === true ? (
        <div className="dropdown_container">
          <div
            className="dropdown_item"
            onClick={
            calculateCart(props.ip, props.browser)
           >
            Fetched data
          </div>
  
        </div>
      ) : null}
    </div>
  );
};

I keep seeing this:

SUCCESS in Fetching Product Data 
Response { type: "basic", url: "http://localhost:3000/api/calcCart/::ffff:127.0.0.1/Mozilla/…Linux%20x86_64;%20rv:109.0)%20Gecko/20100101%20Firefox/111.0", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers(7), body: ReadableStream, bodyUsed: false }
index.js:521:32
SUCCESS in Resolving Product Data: **undefined** index.js:524:30

SUCCESS in Fetching Product Data 
Response { type: "basic", url: "http://localhost:3000/api/calcCart/::ffff:127.0.0.1/Mozilla/…Linux%20x86_64;%20rv:109.0)%20Gecko/20100101%20Firefox/111.0", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers(7), body: ReadableStream, bodyUsed: false }
index.js:521:32
SUCCESS in Resolving Product Data: **undefined** index.js:524:30

If it is being resolved successfully, why is there undefined? If someone could kindly guide me. I have been on this for almost two weeks. Thank you.

Unknown User•406d ago

ttay24•406d ago

Can you hit your api successfully using postman or another application like that? Is this meant to be a POST without any data? I feel like you’re also probably consuming the promise in the first “then”. If you’re expecting a JSON response, then you need to return response.json()

Meraj•405d ago

I've never used Postman but I managed to get it to work using await on response.json(). then(async (response) => { const data = await response.json(); console.log("SUCCESS in Fetching Product Data", Object.values(data))}

Unknown User•405d ago

Reactiflux Join

230KMembers

View on Discord

✅ – dmikester1 – 15-27 Mar 21Is this a good room to ask a regex(in Javascript) question?NightSkyJeff – 00-14 Mar 21I am attempting to split one gzipped file (stream) into two gzipped files (streams). I have the read ✅ – _mercury – 19-49 Mar 16How to get keys that has space ?