0

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;

1 Answer 1

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}} />},
}

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

1 Comment

Alright, that did the trick! Thank you very much =)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.