ERROR Objects are not valid as a React child (found: object with keys
{star, review, reviewDate, name, userID}). If you meant to render a
collection of children, use an array instead.
and my console.log(props.ratings) I get [{…}] 0
<>
{props?.ratings.map((item, index) => {
const { star, review, reviewDate, name, userID } = item;
return (
<div key={index} className="review">
<StarRating
starDimension="20px"
starSpacing="2px"
starRatedColor="#F6B01E"
rating={star}
editing={false}
/>
<p>{review}</p>
<span>
<b>{reviewDate}</b>
</span>
<br />
<span>
<b>by: {name}</b>
</span>
</div>
);
})}
</>
ERROR Objects are not valid as a React child (found: object with keys
{star, review, reviewDate, name, userID}). If you meant to render a
collection of children, use an array instead.
And my console.log(props.ratings) I get [{…}] 0 : {star: 2, review: 'not satisfied', reviewDate: 'Tue Feb 27 2024', name: 'Feisal', userID: '65d5d891dc5ae55627c99ebd'} length : 1 [[Prototype]] : Array(0).
possibly your error is not coming from your provided piece of code
<>
{props?.ratings.map((item, index) => {
const { star, review, reviewDate, name, userID } = item;
return (
<div key={index} className="review">
<StarRating
starDimension='20px'
starSpacing='2px'
starRatedColor="#F6B01E"
rating={star}
editing={false}
/>
<p>{review}</p>
<span>
<b>{reviewDate}</b>
</span>
<br />
<span>
<b>by: {name}</b>
</span>
</div>
);
})}
</>
However, the error you’re encountering usually occurs when props.ratings is not an array during some render cycles. To avoid this, you can add a conditional check before calling map to ensure that props.ratings is indeed an array.
<>
{Array.isArray(props?.ratings) &&
props?.ratings.map((item, index) => {
const { star, review, reviewDate, name, userID } = item;
return (
<div key={index} className="review">
<StarRating
starDimension='20px'
starSpacing='2px'
starRatedColor="#F6B01E"
rating={star}
editing={false}
/>
<p>{review}</p>
<span>
<b>{reviewDate}</b>
</span>
<br />
<span>
<b>by: {name}</b>
</span>
</div>
);
})
}
</>
this error actually comes when you try to render item directly in you jsx code like below
<>
{props?.ratings.map((item, index) => {
return (
<div key={index} className="review">
{item}
</div>
);
})}
</>
Looks like you are trying to render some
itemobject directly somewhere in your code. Are you sure this is the problematic code? What console log are you referring to? There’s none in your example code. See minimal reproducible example.it seems the problem is review props, the problem can be for several reasons: passing an Object/ Non-Serializable Data/ Array as a child, What is the value of the review?