#Data.map is not a function

6 messages · Page 1 of 1 (latest)

sturdy quiver
#

Im having an issue with a react component in my Next JS 13 project.

'use client'
import { Fragment, useState } from 'react';
import { apiConnect } from '../../lib/apiConnect';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper';
import 'swiper/css';

import Logos from './Logos';
import Testimonial from './Testimonial';

export default function ClientSlider() {
  const Data = apiConnect('client/random', null, null, true);
  const [id, setId] = useState(null);

  return (
    <>
      {Data ? (
        <>
                <Swiper …>
                  {Data.map((logo, index) => {
                    return (
                      <Fragment key={index}>
                        { id === null && logo.testimonialExcerpt ? setId(index) : null }
                        {logo.case_study ? (
                          <>
                            {logo.clientLogo ? (
                              <SwiperSlide …>
                            ) : null}
                          </>
                        ) : (
                          <>
                            {logo.clientLogo ? (
                              <SwiperSlide …>
                            ) : null}
                          </>
                        )}
                      </Fragment>
                    );
                  })}
                </Swiper>
            { id ? 
              <Testimonial … />
            : null }
        </>
      ) : null}
    </>
  );
}

The issue is the line {Data.map((logo, index) => {. I'm getting the error TypeError: Data.map is not a function. I've tried all sorts and I'm basically out of ideas. As this is an Array, I would also suggest this need to be a forEach and then once inside Map through. However, changing this to a forEach results in the same error, Data.forEach is not a function. I'm posting as I don't know if this is some quirk of Next I'm aware of?

signal heartBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

glacial creek
#

when you console.log(Data) what does it show?

sturdy quiver
#

Thanks for replying @glacial creek

That outputs…

Promise {
  <pending>,
  [Symbol(async_id_symbol)]: 9192,
  [Symbol(trigger_async_id_symbol)]: 9138,
  [Symbol(kResourceStore)]: undefined,
  [Symbol(kResourceStore)]: undefined,
  [Symbol(kResourceStore)]: {
    destination: null,
    flushScheduled: false,
    responseState: {
      bootstrapChunks: [Array],
      placeholderPrefix: [Uint8Array],
      segmentPrefix: [Uint8Array],
      boundaryPrefix: 'B:',
      idPrefix: '',
      nextSuspenseID: 0,
      streamingFormat: 0,
      startInlineScript: [Uint8Array],
      instructions: 0,
      externalRuntimeScript: null,
      htmlChunks: [Array],
      headChunks: null,

Etc… Which I took to mean I am at the Array. Hence I am trying to map through the Objects inside

bronze cosmos
#

not just apiConnect