Struggling with rendering object in Next.js, receiving an error stating "map is not a function."

Currently, I am attempting to display data fetched from STRAPI using Graphql and Next.js.

Fortunately, my event Adapter is functioning perfectly.
However, when trying to showcase this data on the UI, an error occurs stating event.map is not a function.
While I am able to obtain the same outcome in the front-end, the issue lies with the map function.

console.log:

  const eventsAd = eventsAdapter(data);
  console.log("events data", eventsAd)

Result - (IMG):

https://i.sstatic.net/b9GBn.png

Data result in the console - (IMG).

https://i.sstatic.net/Sjxar.png

Map that i created:

    <div>
      {eventsAd.map((event) => {
        return (
          <>
            <h1>{event.title}</h1>
          </>
        );
       })}
    </div>

Error code:

https://i.sstatic.net/eCQQa.png

Please provide guidance if there's something incorrect. Thank you!

Answer №1

The issue arises when attempting to map an Object:

By modifying your code as shown below, you should be able to resolve the problem:

<div>
  {eventsAd['Featured Events'].map((event) => {
    return (
      <>
        <h1>{event.title}</h1>
      </>
    );
   })}
</div>

Answer №2

eventsAd is not a valid object for using the map method as it is not an array. The map method can only be applied to arrays. However, you can try:

eventsAd["Featured Events"].map((item) => {});

or

eventsAd.International.map((item) => {});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is preventing me from loading js and css files on my web pages?

I have developed a web application using SpringMVC with Thymeleaf and I am encountering an issue while trying to load javascript and CSS on my HTML5 pages. Here is a snippet from my login.html: <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

How can one access a client instance that has been generated using the $create method in ASP.NET AJAX?

I've utilized the client-side ASP.NET AJAX library to create a client component instance using the $create shortcut method. The object is linked to a DOM element, but I'm struggling to find a way to reference the instance since it's not regi ...

Why is the Google Map missing from the Bootstrap modal dialog?

I have multiple links on my website, each describing a different location with unique map data. I would like to display a modal bootstrap dialog with an embedded Google map when a user clicks on any of the links - ensuring that the location shown correspon ...

Renaming errors within a project with a complex nested structure using npm

I am encountering an issue in my NodeJS project which consists of nested subprojects with their own package.json files. Whenever I make changes to dependencies in the subprojects, I encounter errors similar to the one below: npm ERR! code ENOENT npm ERR! ...

Adding an object to a document's property array based on a condition in MongoDB using Mongoose

I have a situation where I need to push an object with a date property into an array of objects stored in a MongoDB document. However, I only want to push the object if an object with the same date doesn't already exist in the array. I've been e ...

Show the percentage of completion on the progress bar while uploading with AJAX

I'm having trouble updating the current upload value on my progress bar in real-time. I know how to do it when the progress bar has stopped, but I can't get it to update continuously. xhr.upload.onprogress = function(e) { if (e.lengthComputa ...

Determine total and showcase it as the range slider is adjusted

Seeking to calculate and present the result of three range sliders. The equation I aim to showcase is: KM driven per year * Avg KM/100L / Price of fuel I have managed to display each slider's individual values, but I am uncertain about how to show t ...

Persist in the face of a mishap in javascript

Two scripts are present on the page. If the first script encounters an error, the second script will not function properly as a result. Is there a way to make the second script ignore any errors from the first one and still work? Please note that I am str ...

Utilize environment variables to access system information when constructing an Angular 2 application

In order to build my Angular application, I want to utilize a single system variable. System Variable server_url = http://google.com This is how my Environment.ts file looks: export const environment = { production: false, serveUrl: 'http://so ...

What is the best approach to accessing a key within a deeply nested array in JavaScript that recursion cannot reach?

After hours of research, I have come across a perplexing issue that seems to have a simple solution. However, despite searching through various forums for help, I have reached an impasse. During my visit to an online React website, I stumbled upon the web ...

Ajax is updating the initial row of an HTML table while the subsequent rows remain unchanged and retain their default values upon modification

I need help with updating the status of a user, similar to what is discussed in this post. The issue I am facing is that only the first row of the table updates correctly. Regardless of the selected value from the dropdown list on other rows, the displaye ...

Utilizing memcache in conjunction with PHP and Node.js

Can JavaScript objects and PHP associative arrays be shared with memcache? Alternatively, is it necessary to convert the data into a string before sharing them? ...

Tips for utilizing a ForEach loop in JavaScript to create an object with dynamically provided keys and values

Looking to create a JavaScript object with the following structure, where the Car Make and Model Names are provided from other variables. { "Sedan":{ "Jaguar":[ "XF", "XJ" ], "AUDI":[ "A6", ...

Tips for accessing touch events within the parent component's area in React Native

I implemented the code below in my React Native app to disable touch functionality on a specific child component. However, I encountered an issue where the touch event was not being detected within the area of the child component. How can I fix this prob ...

Strategies for retrieving the latest content from a CMS while utilizing getStaticProps

After fetching blog content from the CMS within getStaticProps, I noticed that updates made to the blog in the CMS are not reflected because getStaticProps only fetches data during build time. Is there a way to update the data without rebuilding? I typica ...

Extracting information from a JSON file using React.js

I have a JSON file named data.json in my React.js project: [{"id": 1,"title": "Child Bride"}, {"id": 2, "title": "Last Time I Committed Suicide, The"}, {"id": 3, "title": "Jerry Seinfeld: 'I'm Telling You for the Last Time'"}, {"id": 4, ...

A step-by-step guide on uploading files from the frontend and saving them to a local directory using the fs and express modules

I'm considering using fs, but I'm not entirely sure how to go about it. Here's the setup: ejs: <form action="/products" method="POST"> <input type="file" name="image" id="image"> <button class="submit">Submit</but ...

Is the ClientScriptmanager operational during a partial postback?

After successfully completing an ASP.NET operation, I want to automatically close the browser window. The following code is executed by a button within an Ajax UpdatePanel: Page.ClientScript.RegisterClientScriptBlock(typeof(LeaveApproval), "ShowSuccess", ...

What is the best way to designate external dependencies in WebPack that are not imported using '*'?

I need assistance with specifying office-ui-fabric-react as an external dependency in my TypeScript project using Webpack. Currently, I am importing only the modules I require in my project: import { Dialog, DialogType, DialogFooter } from 'office-u ...

What steps should I take to create a React component in Typescript that mimics the functionality of a traditional "if" statement?

I created a basic <If /> function component with React: import React, { ReactElement } from "react"; interface Props { condition: boolean; comment?: any; } export function If(props: React.PropsWithChildren<Props>): ReactElement | nul ...