Get item data by item onclick event

This is my component:

export const ProductList = ({products}) => {

    const getItemData = (e) => {
        console.log(e.target);
    };

    return (
        <IonList>
            <IonListHeader>
                <IonLabel>Productos disponibles</IonLabel>
            </IonListHeader>
            {
                products.map(product => {
                    return(
                        <IonItem
                            onclick={getItemData} 
                            key={product.id}>
                            <IonAvatar 
                                slot="start" 
                                class="md hydrated product-avatar-list"
                            >
                               <img src={product.image_path ? `${_URL.IMAGES}${product.image_path}` : '/assets/images/rgm.jpg'} alt=""/>
                            </IonAvatar>
                            <IonLabel>
                                <h2>{product.name}</h2>
                                <h3>{product.platform} ({product.region})</h3>
                                <p>{product.release_date}</p>
                            </IonLabel>
                        </IonItem>
                    );
                })
            }
        </IonList>
    );

};

The problem is when i click on item is focusing just one children element and i can’t get all childrens data.
How can i get data from each child element?
Thanks in advance!

1 post - 1 participant

Read full topic