Why when passing parameters from one component to another it arrives undefined and then arrives again with the data?

As will be shown below when passing properties from a parent component to a child component my code is executed first before the properties arrive and when trying to do a .map of an Array it returns the error “Cannot read properties of undefined (reading ‘map’)”. Why does this happen?

As you can see in the image, first you get undefined values which generates the error in the .map and then you get the properties

As you can see in the image, first you get undefined values which generates the error in the .map and then you get the properties

Parent component:

import React, {useEffect, useState} from "react";
import ItemDetail from "./itemDetail";
import '../../App.css';
import { useParams } from "react-router-dom";

//Component Class
const ItemDetailContainer = () => {
    const [producto, productos] = useState([]);
    const { productId } = useParams();

    useEffect(() => {
        fetch('http://localhost:3000/productos/' + productId)
            .then(res=>res.json())
            .then(data=>productos(data))
    }, [productId]);

    console.log(producto);

    return (
        <div className="container">
            <ItemDetail
                nombre={producto.nombre}
                id={producto.id}
                precio={producto.precio}
                category={producto.category}
                imagenes={producto.imagenes}
                ancho={producto.ancho}
                alto={producto.alto} />
        </div>
    )
}

export default ItemDetailContainer;

Child component:

import React from 'react';
import { Card } from 'react-bootstrap';
import ItemCount from '../itemCount';

const ItemDetail = ({ nombre, id, precio, category, imagenes, ancho, alto }) => {

    console.log(imagenes);

    return (
            <div className="row" key={id} id={id}>
                <div className="col-md-6" id="productImage">
                    <div className="carousel-item">
                     {imagenes.map((p) => (
                        <img src={p} className="d-block w-100" alt={nombre} />
                    ))}
                    </div>
                </div>
                <div className="col-md-6 producto">
                    <div className="card">
                        <Card.Body>
                            <Card.Title>{nombre}</Card.Title>
                            <Card.Text>{category}</Card.Text>
                            <Card.Text>${precio}</Card.Text>
                            <ItemCount />
                        </Card.Body>
                    </div>
                </div>
            </div>
    );
};

export default ItemDetail;

Answer

Change your code to only execute if imagenes is an array. Personally I would rethink how you are structuring your initial state. Instead of it being an empty array, perhaps make it an object with all of those properties having default values.

<div className="carousel-item">
    { Array.isArray(imagenes) && imagenes.map((p) => (
        <img src={p} className="d-block w-100" alt={nombre} />
    ))}
</div>