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.
UU
Unknown User378d ago
M
Meraj378d ago
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.
UU
Unknown User377d ago
M
Meraj377d ago
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.