Meraj Comments - Reactiflux

Meraj

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

Component not showing data after useRef

Thank you for your answer. I have understood what you are saying. Let me try going back to useState and useEffect with what you have mentioned.

5 replies

RReactiflux

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

Component not showing data after useRef

Now the code:

const fetchData = async (ipAddress, browserName) => {

    const result = await fetch(`/api/calcCart/${ipAddress}/${browserName}`, {
      method: 'POST'
    }).then(async(response)=>{console.log("response in fetchData is");
    console.table(response);
    const data  = await response.json();
    console.log("data in fetchData is");
    console.table(data);
    if(data){
    cdata = Object.values(data)[0];
    pdata = Object.values(data)[1];
   
    // setcData(cdata);
    // setpData(pdata);
    ref={cdata};
    ref={pdata};
        console.log("cdata in fetchData is:",cdata);
console.log("pdata in fetchData is:",pdata);
    for(let i=0; i<pdata.length;i++){
    for(let j=0; j<pdata[i].length;j++)
   userData[j] = {products:pdata[i][j],count: cdata[i][j]};

        }
        //setuserData(userData);
        ref={userData};
    console.log("userData in fetchData is:");
    console.table(userData);
    }}).catch(console.error());
    console.log("cdata outside then in fetchData is:",cdata);
    console.log("pdata outside then in fetchData is:",pdata);
   
  };

//The component:
function ShowCounts(){
  
    
  fetchData(props.ip,props.browser);
  if(cdata.length>0 && pdata.length>0){
return(<div className='cart-products'>
           
{cdata.length>0 ?
cdata.map(countArray=>{
  countArray.map(counts=>{
    
   return <div>{counts}</div>
    
  }) 
  
}): <div>No counts yet</div>}
  </div>)}
}


//I show the component here:
const Dropdown = ({ open }) => {
return (
    <div >
      {open === true ? (
        <div className="dropdown_container">
          <div
            className="dropdown_item"
 >
           
            <ShowCounts/>
 </div>
         
        
   
          
        </div>
      ) : null}
    </div>
  );
};

const fetchData = async (ipAddress, browserName) => {

    const result = await fetch(`/api/calcCart/${ipAddress}/${browserName}`, {
      method: 'POST'
    }).then(async(response)=>{console.log("response in fetchData is");
    console.table(response);
    const data  = await response.json();
    console.log("data in fetchData is");
    console.table(data);
    if(data){
    cdata = Object.values(data)[0];
    pdata = Object.values(data)[1];
   
    // setcData(cdata);
    // setpData(pdata);
    ref={cdata};
    ref={pdata};
        console.log("cdata in fetchData is:",cdata);
console.log("pdata in fetchData is:",pdata);
    for(let i=0; i<pdata.length;i++){
    for(let j=0; j<pdata[i].length;j++)
   userData[j] = {products:pdata[i][j],count: cdata[i][j]};

        }
        //setuserData(userData);
        ref={userData};
    console.log("userData in fetchData is:");
    console.table(userData);
    }}).catch(console.error());
    console.log("cdata outside then in fetchData is:",cdata);
    console.log("pdata outside then in fetchData is:",pdata);
   
  };

//The component:
function ShowCounts(){
  
    
  fetchData(props.ip,props.browser);
  if(cdata.length>0 && pdata.length>0){
return(<div className='cart-products'>
           
{cdata.length>0 ?
cdata.map(countArray=>{
  countArray.map(counts=>{
    
   return <div>{counts}</div>
    
  }) 
  
}): <div>No counts yet</div>}
  </div>)}
}


//I show the component here:
const Dropdown = ({ open }) => {
return (
    <div >
      {open === true ? (
        <div className="dropdown_container">
          <div
            className="dropdown_item"
 >
           
            <ShowCounts/>
 </div>
         
        
   
          
        </div>
      ) : null}
    </div>
  );
};

I only get 'No counts yet' despite the fact that console.log does show cdata and pdata correctly. If anyone could help me out I would be greatly obliged.

5 replies

RReactiflux

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

Cannot fetch data for a component from an API

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

5 replies

RReactiflux

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

Cannot display table using React

Thank you so much. This did it. Much obliged!

8 replies

RReactiflux

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

Cannot display table using React

Thanks for replying. I just want a table with Products and Counts as two columns with their respective values under them. Products Counts A 3 B 4 C 6 I also tried userArranged.push([products, counts]) to have a different array but it gave me two rows, first one filled with all products and second one with all counts.

8 replies