Map list of content with React

[Rola (Rola F)]

Hi All and sorry if what I'm asking is really basic.

I am trying to map a list of content from Prismic on ReactJS but what I'm getting is a React error that say: "doc.map is not a function".

I'm pasting my code bellow if you can help me with this, please:

Thanks

import './App.css';
import React, { state, useState, useEffect, Component } from "react";
import Prismic from '@prismicio/client';
import { Date, Link, RichText } from 'prismic-reactjs'

const apiEndpoint = 'https://myrepo.cdn.prismic.io/api/v2search?ref=YPqXQxAAACEA4xxxxxxx'
const accessToken = '' // This is where you would add your access token for a Private repository

const Client = Prismic.client(apiEndpoint)

const App = ()=> {
    const [doc, setDocData] = React.useState([]);
    React.useEffect(() => {
        const fetchData = async () => {
            const response = await Client.query(
                Prismic.Predicates.at('document.type', 'page')
            )
            if (response) {
                console.log(response.results.uid);
                setDocData(response.results[0])
            }
        }
        fetchData()
    }, []);
    return (
        <div>
            <p>testing2</p>
            {
                doc.map((user) => (
                    <div key={user.uid}>
                        <p>{user.uid}</p>
                    </div>
                ))}
        </div>
    );
};


export default App;

[Priyanka (Priyanka Maheshwari)]

Hello @Rola

Welcome to the Prismic community.

Can you try to add an if condition above your return statement something like:

if(doc){

  return(.........)
}

If you are getting the complete map object and set correctly using React useState, it should work.

I's recommend you take a look at our React.js project: GitHub - prismicio/reactjs-blog

Let me know if you have any doubts.

Thanks,
Priyanka