Data type does not correspnd between parent and child component in treact-typescript prop-CodePudding

I am building an app with react and typescript

I am passing my data to a child component using props

I decleared the data type of the property as an interfce in the parent component

which is passed down to the child component

but I am getting error that it does not correspond

Parent component

 interface IProperty {
       property: {
          title: string;
       }[];
   }
const Dashboard = () => {
  const [loading, setLoading] = useState(true);
  const [properties, setProperties] = useState<IProperty["property"]>([
    {
      title: "New estate"
    }
  ]);
return (
    <div className="__recent-upload">
        <ListOfProperties loading={loading} datas={properties} />
    </div>
)
export default Dashboard

Child Component

 interface IProperty {
       property: {
          title: string;
       }[];
   }

const ListOfProperties: React.FC<{ loading: boolean, datas: IProperty }> = ({ loading, datas }) => {

  return (
    <div>
      <h4 className="ml-4">Newly uploaded Properties</h4>
      <Skeleton active loading={loading}>
        <div className="table">
         
        </div>
      </Skeleton>
    </div>
  );
};

export default ListOfProperties;

Error

TS2741: Property 'property' is missing in type '{ title: string; }[]' 
but required in type 'IProperty'.

CodePudding user response：

You have two possible solutions for that: 1- to use the same type for useState

const [properties, setProperties] = useState<IProperty>([{
   property: {
      title: "New estate"
    }
  }]);

2- or bypass correct object to props

 <ListOfProperties loading={loading} datas={
     {property:properties}
} />

CodePudding user response：

Your error comes from the fact that data is expecting a full object with a property key. But you only send an array [ {title: "foo" } ].