Printing prop works but printing prop object value does not work

Question

i am having really hard time understanding why my code is not working. Could someone please explain to me why i can print the prop object but not access its values?

Parent:

function createCarBlocks(){
    return carsJSONData.map((car) => {
        console.log(car);
        return <CarBlock carBlockItem={car}/>
    })
};

Child:

export interface CarBlockItemProps {
id: string,
modelName: string,
bodyType: string,
modelType: string,
imageUrl: string

}

const CarBlock = (props: CarBlockItemProps) => {
    console.log("This is me printing props", props);
    console.log("This is me trying to access its value", props.bodyType); //Note i cannot write props.carBlockItem

    return (
        <p>test</p>
    );
};

export default CarBlock;

Output:

Answer 1

In createCarBlocks(), function you're returning CarBlock components with the prop carBlockItem which isn't specified in the CarBlock component.

If you want to receive the carBlockItem as an object, you could create a new interface that specifies the properties for the item, separate from the interface for the CarBlock props

export interface CarBlockItem {
    id: string,
    modelName: string,
    bodyType: string,
    modelType: string,
    imageUrl: string
}

export interface CarBlockItemProps {
    carBlockItem: CarBlockItem;
}

And destructure the props object in order to get the carBlockItem object

const CarBlock = ({ carBlockItem }: CarBlockItemProps) => {
    console.log("carBlockItem: ", carBlockItem);
    console.log("This is me trying to access its value", carBlockItem.bodyType); 

    return (
        <p>test</p>
    );
};

export default CarBlock;