I'm trying to pass array of objects through props but I got that error:

(property) images: [Images]

Type '[Images]' is not assignable to type'string'.ts(2322)

ProductBlock.tsx(4, 5): The expected type comes from this index signature.

Here is my block:

interface Images {
    [key: string]: string;
}

interface Colors {
    [key: string]: string;
}

interface Product {
    _id: string;
    name: string;
    description: string;
    price: number;
    colors: [string];
    images: [Images];
    type: string;
    likes: number;
}

const ProductBlock = (product: Product) => {
    console.log(product.images); // [{...}]

    const RenderColors = () => {

    }
    
    const RenderImages: React.FC<Images> = (images: Images) => {
        console.log(images);
        return(
            <>
                
            </>
        )
    }

    return (
        <div className="product product-container" key={product._id}>
            <RenderImages images={product.images}/> //<--- Error here at "images="
            <h3 className="product-title">{product.name}</h3>
        </div>
    )
}

export default ProductBlock;

CodePudding user response：

product.images is an array of Images objects, but you are passing it to RengerImages which is taking a single Images object as the parameter.

Try this:

const ProductBlock = (product: Product) => {
    console.log(product.images); // [{...}]

    const RenderColors = () => {

    }
    
  const RenderImages: React.FC<{ images: [Images] }> = ({ images }) => {
        console.log(images);
        return(
            <>
                
            </>
        )
    }

    return (
        <div className="product product-container" key={product._id}>
            <RenderImages images={product.images}/> 
            <h3 className="product-title">{product.name}</h3>
        </div>
    )
}