Get item data by item onclick event

Ionic Framework Ionic React
1

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 Like
2

I found the solution!

import React from 'react';
import { IonList, IonItem, IonLabel, IonAvatar, IonListHeader } from '@ionic/react';
import './ProductList.css';
const _URL = require("../../config/url.config.js");

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

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

    return (
        <IonList>
            <IonListHeader>
                <IonLabel>Productos disponibles</IonLabel>
            </IonListHeader>
            {
                products.map(product => {
                    return(
                        <IonItem
                            onClick={() => getItemData(product)} 
                            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>
    );

};

Just passing the product on the click event.

1 Like
3

thanks same problem here now working