Type 'Element' is missing the following properties from type 'OfferProps': id, firstName, city, price, and 2 more. TS2740

Question

I'm trying to use render an array of elements, and I'm getting this error in my component

Type 'Element' is missing the following properties from type 'OfferProps': id, firstName, city, price, and 2 more. TS2740

My code:

OffersComponent

import React from 'react';
import { OffersProps } from './types';
import { OfferComponent } from '../OfferComponent/OfferComponent';
import { OfferProps } from '../OfferComponent/types';

export const OffersComponent = ({ dataset }: OffersProps) /* I tried adding :Element[] here, but no luck*/ => dataset.map(
  ({
    id, firstName, city, price, image, description,
  }): OfferProps => (
    // Here's the error
    <OfferComponent id={id} firstName={firstName} city={city} price={price} image={image} description={description} />
  ),
);

OffersProps

import { OfferProps } from '../OfferComponent/types';

export interface OffersProps {
  dataset: OfferProps[];
}

OfferComponent

import React from 'react';
import { OfferProps } from './types';

export const OfferComponent = ({ id, firstName, city, price, image, description }: OfferProps) => (
  <div>
    <div>{`${id}`}</div>
    <div>{firstName}</div>
    <div>{city}</div>
    <div>{`${price} pln`}</div>
    <img src={image} alt={description} />
    <div>{description}</div>
    ===============================
  </div>
);

OfferProps

export interface OfferProps {
  id: {};
  firstName: string;
  city: string;
  price: number;
  image: string;
  description: string;
}

As far as I understand it's because I'm returning an array of elements, but why then doesn't adding :Element[] fix things? Or am I completely wrong here?

Answer 1

I think something is wrong with your component return type

Try:

export const OffersComponent = ({ dataset }: OffersProps) => dataset.map(
  ({
    id, firstName, city, price, image, description,
  }) => (
    // Here's the error
    <OfferComponent id={id} firstName={firstName} city={city} price={price} image={image} description={description} />
  ),
);