Component definition is missing display name react/display-name error

Question

I wanted to upload a project to Vercel NextJS and it's saying I have missing display name react. From what I've googled this error shows up when function isn't exported correctly? This is my code any idea?

this is the error on vercel: Error: Component definition is missing display name react/display-name (and path to this file below)

import React from "react";

import MaterialTable from "material-table";

function ItemsList(props) {
  const array = [];

  {
    props.items.map(
      (item, index) =>
        (array[index] = {
          id: item.idItem,
          imageUrl: item.itemPicture,
          itemTitle: item.itemTitle,
          itemsSold: item.count,
        })
    );
  }

  console.log(array);

  const columns = [
    {
      title: "Item picture",
      field: "imageUrl",
      render: (rowData) => <img src={rowData.imageUrl} style={{width: 200}} />,
    },

    {title: "Item title", field: "itemTitle"},
    {title: "Sold items", field: "itemsSold", type: "numeric"},
  ];

  return <MaterialTable columns={columns} data={array} title="Items" />;
}
export default ItemsList;

Answer 1

You get this error because this function is considered to be a component without a name (anonymous function).

(rowData) => <img src={rowData.imageUrl} style={{width: 200}} />

You should be able to fix it just by giving a name to the function:

{
  render: function myRender (rowData){return <img src={rowData.imageUrl} style={{width: 200}} />},
}