Not rendering html tags (react)

Developing with Prismic
1

Hello all

I'm displaying some content in a basic react app but for a strange reason I can only get a raw content missing the html tags.

This is the content that I have in Prismic:

prismic-01

And this is my code:

{prismicDoc?.data?.contenido?.map(x => x?.text || null)}

How should I render this properly?

2

Hey @Rola, can you show me the setup for the Rich Text field (in the Custom Type) and the content you're adding to the document? That can help us reproduce the use case on our end. Also, which technology are you using to query the data?

4

Hi @Pau

This is the code of that page:

const SinglePage = ({ match }) => {
    const [prismicDoc, setPrismicDoc] = useState(null);
    const [notFound, toggleNotFound] = useState(false);
    const uid = match.params.uid;
    // Get the blog post document from Prismic
    useEffect(() => {
        const fetchPrismicData = async () => {
            try {
                const doc = await client.getByUID('paginas', uid);

                if (doc) {
                    setPrismicDoc(doc);
                } else {
                    console.warn('Blog post document was not found. Make sure it exists in your Prismic repository');
                    toggleNotFound(true);
                }
            } catch (error) {
                console.error(error);
                toggleNotFound(true);
            }
        }
        fetchPrismicData();
    }, [uid]);
    // Return the page if a document was retrieved from Prismic
    if (prismicDoc) {
        const title =
            prismicDoc.data.titulo.length !== 0 ?
                RichText.asText(prismicDoc.data.titulo) :
                'Untitled';
        return (
            <div>
                    <div key={prismicDoc.id}>
                        <h1> {prismicDoc?.data?.titulo[0]?.text}</h1>
                        <img src={prismicDoc?.data?.main_image?.url} alt=""/>
                        <p>{prismicDoc?.data?.intro_text[0]?.text}</p>
                       <div>
                           {prismicDoc?.data?.contenido?.map(x => x?.text || null)}
                       </div>

                    </div>

            </div>
        );
    } else if (notFound) {
        return <NotFound />;
    }
5
  • What are the tags that you're expecting to see in the titulo Rich Text field?
  • What is the URL of your repository?