Passing string from parent to render multiple children

I may lose something on the way.. I want to pass object arguments to a children to dinamically render it in three different ways.

Here is my object:

const cards = [
        {
            imgSrc: "first",
            desc: "some text"
        },
        {
            imgSrc: "second",
            desc: "some text"
        },
        {
            imgSrc: "third",
            desc: "some text"
        }
    ];

This is the children component:

import { Box } from '@mui/system'
import React from 'react'

import "../../style/main.scss"

import first from "../../images/veloce.png"
import second from "../../images/sicuro.png"
import third from "../../images/vicino.png"
import { Typography } from '@mui/material'

function Card( source, text ) {
    return (
        <Box className="foundation-card">
            <img src={source}/>
            <Typography variant="h6">{text}</Typography>
            <Typography variant="body2">{text}</Typography>
        </Box>
    )
}

export default Card

And then i have the parent component where i want to render multiple Card mapping the cards array:

import Card from "./Card"
import CustomDivider from "../foundation/CustomDivider"

function Values() {

    return (
        <Box className="vertical-box main-maxw section-margin">
            <Typography variant="h4">Perchè sceglierci</Typography>
            <CustomDivider />
            <Box className="foundation-box values">
                {cards.map((p) => {
                    return <Card source={p.imgSrc} text={p.desc} />
                })}
            </Box>
        </Box>
    )
}

export default Values

and then i receive this:

Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

I suppose it is a stupid error but i am in my first approach and i don’t know how to move. Thank you all.

Answer

I think the problem is that your card function is expecting positional arguments but you’re calling it with an object.

<Card source={p.imgSrc} text={p.desc} />
// These two things are equivalent.
Card({source: p.imgSrc, text: p.desc})

So essentially you were assigning the source arg and object that contained both source and text.

Try changing your card function to accept an object

function Card({source, text}) {
...
}