Meraj Posts - Reactiflux

Meraj

•Created by Meraj on 4/6/2023 in #react-forum

Component not showing data after useRef

Hello, A little explanation before the code: I am fetching data from a database asynchronously. Fetches just fine using the function fetchData. Then to stop continuous re-rendering I use useRef instead of useState to set two arrays cdata and pdata. Their console.log shows it worked. However, when I call my component after onclick neither cdata nor pdata are available. I cant use useEffect as I need my data to be available after onclick and fetchData within useEffect means it is only available after the page re-renders. Not at onclick.

5 replies

RReactiflux

•Created by Meraj on 3/23/2023 in #react-forum

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.

5 replies

RReactiflux

•Created by Meraj on 12/28/2022 in #react-forum

Cannot display table using React

Hi, I am trying to display a simple table but it is showing me error. Been stuck on this for two weeks. Here is my code on codesandbox: https://codesandbox.io/s/angry-gauss-lvsrn3?file=/src/App.js Embedding it here too:

import "./styles.css";

export default function App() {
  const products = ["A", "B", "C"];
  const counts = [3, 4, 6];

  let userArranged = [];
  for (let i = 0; i < products.length; i++) {
    userArranged[i] = { product: products[i], counts: counts[i] };
  }

  return (
    <div className="cart-table">
      <div className="heading-cart">Your cart:</div>
      <div className="header-cart">
        <div className="table-header-cell">Product</div>
        <div className="table-header-cell">Count</div>
      </div>
      <div className="cart-products">
        {userArranged[0].map((productArray) => (
          <div className="actual-cart">
            {productArray.map((prod) => (
              <div className="table-body-cell">{prod}</div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

import "./styles.css";

export default function App() {
  const products = ["A", "B", "C"];
  const counts = [3, 4, 6];

  let userArranged = [];
  for (let i = 0; i < products.length; i++) {
    userArranged[i] = { product: products[i], counts: counts[i] };
  }

  return (
    <div className="cart-table">
      <div className="heading-cart">Your cart:</div>
      <div className="header-cart">
        <div className="table-header-cell">Product</div>
        <div className="table-header-cell">Count</div>
      </div>
      <div className="cart-products">
        {userArranged[0].map((productArray) => (
          <div className="actual-cart">
            {productArray.map((prod) => (
              <div className="table-body-cell">{prod}</div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

The error: userArranged[0].map is not a function Can someone help me out please?

8 replies