How to use map in react component using nextjs app?

Question

I have data returned from the backend as an array that i want to populate on react component.

home.js

import Head from "next/head";
import Header from "../src/components/Header";
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import TextField from '@mui/material/TextField';
import SendIcon from '@mui/icons-material/Send';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import getDupImages from "../src/services/getDupImages";
import { useState, useEffect } from 'react'

const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary,
}));

export default function Home({data}) {
  let _data;
  const fetchData = async () => {
    _data = await getDupImages();
    console.log("DATA>>>", _data);
    return _data;
  };
   const submit = (event) => {
    event.preventDefault();
    fetchData();
   }
  return (
    <>
      <Head>
        <title>De-Dup</title>
        <link rel="icon" type="image/ico" href="/img/goals.ico" />
      </Head>
      <Header />
      <section>
      <Box sx={{ flexGrow: 1 }}>
      <Grid container spacing={2}>
        <Grid item xs={5}>
          <Box
              component="form"
               sx={{
                '& > :not(style)': { m: 1, width: '75ch' },
              }}
               noValidate
               autoComplete="off"
            >
            <TextField id="outlined-basic" label="location path" variant="outlined" />
            <Stack direction="row" spacing={2}>
            <Button variant="contained" onClick={submit} endIcon={<SendIcon />}>
              Submit
            </Button>
          </Stack>
        </Box>
        </Grid>
        <Grid item xs={7}>
        {data.map((d) => {
        return (
          <div>
            {d.title}
          </div>
        );
      })}
        </Grid>
      </Grid>
    </Box>
      </section>
    </>
  );
}

Error

1 of 1 unhandled error

Server Error
TypeError: Cannot read property 'map' of undefined

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Unmitigated · Accepted Answer · 2023-01-28 21:33:26Z

2

Put the data in the component state and check if there actually is data before displaying it.

const [data, setData] = useState();
const fetchData = async () => {
   setData(await getDupImages());
}

Then in your JSX:

{!!data && data.map(d => <div>{d.title}</div>}

answered Jan 28, 2023 at 21:33

Unmitigated

91.5k12 gold badges103 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andreas Winther Moen Over a year ago

It seems to be a React Server Component, which means you can't use useState.

damonholden Over a year ago

!! is not needed here. values are coerced to Boolean.

Sean Mizen Over a year ago

@damonholden some compiler settings (e.g. strictNullChecks in typescript) require explicit casting to boolean for falsy data. This is totally fine and acceptable code in some circumstances.

Andreas Winther Moen · Accepted Answer · 2023-01-28 21:35:33Z

1

You are trying to render the data before it is available. Use this instead

{data && data.map((d) => {
    return (
      <div>
        {d.title}
      </div>
    );
  })}

answered Jan 28, 2023 at 21:35

Andreas Winther Moen

5805 silver badges11 bronze badges

Comments

damonholden · Accepted Answer · 2023-01-28 21:42:07Z

0

Either initialise the data state as an array or use the Optional chaining (?.) operator before the map function:

data?.map((d) => {
  return <div>{d.title}</div>;
})

Hope this helps.

answered Jan 28, 2023 at 21:42

damonholden

1,1827 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to use map in react component using nextjs app?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related