Error Object as Child with async Function in Slice

Developing with Prismic
, ,
1

I have an issue with this code, but i don't know where.

In the following code Testimonials is found, and well map then in the return, but there's an error pop-in :"Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead."

I think it's because slice is rendering before testimonials has been found maybe :confused:

This part of code is in a slice called in a slicezone.

/Start code

import { PrismicRichText } from "@prismicio/react";
import { isFilled } from "@prismicio/client";
import { createClient } from "@/prismicio";
import { useEffect, useState } from "react";

export default async function TestimonialsSection({slice}) {

const client = createClient();

const testimonials = await Promise.all(
slice.items.map((item, i) => {
if (
isFilled.contentRelationship(item.testimonial)
) {
let testi=client.getByUID("testimonials",item.testimonial.uid,item.testimonial.lang)
return testi
}
})
);

console.log(testimonials)

return (

{testimonials.map((item, i) => {
return(
{/Div and properties rendered but not showed in my message/}





)})}

)
}

End of code

Could you please help me to find the solution ?

4

Hi @lempebap,

I think the solution to this might be as simple as returning the testimonials directly like so:

return testimonials.map((item, i) => {
  return <p>{item.uid}</p>;
});

Give that a try and let me know if it works for you or not.

5

Hi @Levi Sorry for the late answer !

The problem was here because I had two return in my page, so I passed content through the slice with a context on slicezone and got it in the slice then to order it !

Thanks for helping me !

1 Like