Items not loading in useEffect in react

Question

This is my react component:

import { ApiClient } from 'admin-bro'
import { Box } from '@admin-bro/design-system'
import React, { useEffect, useState } from "react";
// import './gallery.css';

const api = new ApiClient()

const Gallery = () => {
  const [data, setData] = useState({})

  useEffect(() => {
    api.getPage({pageName: 'Gallery'}).then((response) => {
      setData(response.data)
    })
  }, [])
  console.log(data);
  console.log(data.imageNameArray);
  return (
    <section id="list-view">
      {data.imageNameArray && data.imageNameArray.map(name=>{
      <h3>Hello</h3>
      // <div className="card" style="width: 18rem;">
      //   <img className="card-img-top" src={"/images/"+name} alt="Card image cap"/>
      //   <div className="card-body">
      //     <h5 className="card-title">Name: {name}</h5>
      //     <h5 className="card-title">Size: 15kb</h5>
      //     <a href="#" classNamr="btn btn-danger">Delete</a>
      //   </div>
      // </div>
    })}
    </section>
  )
}

export default Gallery

My back-end:

Gallery: {
            label: "Gallery Images",
            handler: async (req, res, context)=>{
                const imageNameArray = await getImagesUrl();
                return {
                    imageNameArray: imageNameArray
                }
            },
            component: AdminBro.bundle('../views/admin/dashboard/gallery.jsx')
        },

I send data from back-end and console.log gives me the array I need but I am not getting anything in the html finally. I get the array on console. I have used async readdir with util.promisify and send the names of the files as an array. Can someone give me an insight on this.

It looks like all your HTML is commented out, remove the //s — Nerdragen, Feb 22 '21 at 19:16
@Nerdragen then also at least h3 tag hello should be printed. I tried the comment just to see if I have at least simple HTML — Shobhit Tewari, Feb 22 '21 at 19:19
@Shobhit Tewari oops, didn't see that. Nadia Chibrikova should have the correct answer below. — Nerdragen, Feb 22 '21 at 19:28

score 1 · Accepted Answer · answered Feb 22 '21 at 19:23

1

The problem is you arrow function

  data.imageNameArray && data.imageNameArray.map(name=>{<h3>Hello</h3>})}

doesn't return anything. Either remove {} or add return keyword.

name => element is short for (name) => {return element;}, the way you have it, it is name => {element; return;}

answered Feb 22 '21 at 19:23

Nadia Chibrikova

4,916
1
15
17

I think this is the correct answer. Another method of doing it will be to replace the `{}` with `()`. That serves the same purpose as returning without using the `return` keyword. – Nerdragen Feb 22 '21 at 19:27
I just missed it. Ahhhhhh. Thanks. – Shobhit Tewari Feb 22 '21 at 19:29

Items not loading in useEffect in react

1 Answers1