not defining array's length in reactjs

I'm using fetch to get the product as an object and while setting it to my state I'm adding new key comments: [] to the object. If I console.log(product.comments) it's returning empty array which's correct but when I console.log(product.comments.length) it says can't access property "length", product.comments is undefined

useEffect(() => {
	
	setLoading(true)
	fetch(`https://fakestoreapi.com/products/${id}`)
		.then((res) => res.json())
		.then((data) => {
			setProduct({ ...data, comments: [] })
			setLoading(false)
		})
		.catch((err) => console.error(err))
}, [id])

what did I do wrong, how to get the length of comments so that I can map it?
this is what I wanna do

`{product.comments.length ? (
  comments.map((comment) => {
   return (
    <li>
     <div className="testimonial">
      <p className="quote">{comment.comment}</p>
     </div>
    </li>
   )
 })
 ) : (
    <h2>Be first to comment</h2>
 )}`

I also tried logging product.comments.length to console but got the same error

The issue is related to render cycles. Either early return from your component e.g.

// data, isLoading, error = fetchData()

if (isLoading) { return <div>Loading …</div>
if (error) { return <div>Error</div> }

return ( <div>Your component body</div>)

Or you could check if the property exists before accessing the length property using the optional chaining operator.

{product?.comments.length ? (product.comments.map( … )) : (<h2>Be first to comment</h2>)}

That is because you are trying to access comments even before it's set on the product you should just check if product is not empty or set before you can access any property on it.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

if(product) {
    return {product.comments.length ? (comments.map((comment) => {
       return (<li>
            <div className="testimonial">
                <p className="quote">{comment.comment}</p>
            </div>
        </li>);
    })) : (
      <h2>Be first to comment</h2>
   )};
} else {
    return <p>Product loading</p>
}

<!-- end snippet -->