How can I solve this error 'don't use object as a type'?

Question

I do not understand this error message caused.

My component has two and one data array which has objects.

I got an error message 'Don't use object as a type. The object type is currently hard to use'.

How can i solve it ??

I attached the data which array has objects.

first.tsx...
import { dataList } from './xxx';
   // This dataList === 
export const dataList = [
  {
    id: 1,
    title: "text",
    hidden1: "text",
  },
  {
    id: 2,
    title: "text",
    hidden1: "text",
    hidden2: "text",
  },
  {
    id: 3,
    title: "text",
    hidden1: "text",
    hidden2: "text",
    hidden3: "text",
  },
];

const First = () => {
  return <Second data={dataList} />
}

second.tsx...
const Second = ({data} : { data:object[] } ) => {.    << here, "Don't use 'object' as a type.
  return <ul><li> {data.tag....blah blah} </li><ul>
}

error message :

Don't use `object` as a type. The `object` type is currently hard to use ([see this issue](https://github.com/microsoft/TypeScript/issues/21732)).
Consider using `Record<string, unknown>` instead, as it allows you to more easily inspect and use the keys  @typescript-eslint/ban-types

Answer 1

You need to be explicit with the type of the data being destructured here.

You can just create an interface of the data.

Edit: As your data has some optional parameters I updated the interface to reflect that.

interface IData {
    id: number;
    title: string;
    hidden1: string;
    hidden2?: string;
    hidden3?: string;
}

Then replace object[] with IData[]. So now you specify that this takes in an array of the IData interface.

const Second = ({ data } : { data:IData[] }) => {
  return <ul><li>{data}</li><ul>
}