Once I render this functional component and open the console to check if props are present or not. The console shows me props containing array two times but the first time printed array is empty and the array that was printed the second time contains the data. I am really confused and unable to debug this error.
Below is the code:
const MainConents = (props) => {
console.log(props.details);
return (
<>
<div className="container" style={{marginTop : "20px"}}>
<div className="row">
<div className="col-12">
// show single post in loop wise from database
// show pagination for posts
</div>
</div>
</div>
</>
);
}
export default MainConents;
The output in my browser is:
props are passed from a parent component and I believe these details are fetched by invoking an api endpoint.
Therefore, during the initial rendering backend server didn't respond back with a response and as a result, it will show an empty array at the beginning (which is initial value of props.details). But when it sends the response, props.details are now updated and as a result child component MainConents will be re-rendered. Then, it will show the updated array in the console logs.
Therefore, initially you'll see an empty array and then the updated props.details.
If you only need to print the array when it's not empty. Then you can put a simple condition as follows. (But it's not necessary, because console logs are only used for debug purposes)
if(props.details.length > 0){
console.log(props.details);
}