Trying to pass Id value from this component to price component, but it's seems i couldn't display it or access the Id value

// LotItem Component

const LotItem = props => {

const { lotName, id } = props.lot;

return (

<IonGrid>

  <IonRow>

    <IonCol size-md='6' offset-md='3'>

      <IonList>

        <IonCard>

          <IonItem

            routerLink={`/lot/${id}`}

            button

            onClick={() => <Prices id={id} />}

          >

            <IonIcon slot='start' name='car-sport'></IonIcon>

            <IonLabel>{lotName}</IonLabel>

          </IonItem>

        </IonCard>

      </IonList>

    </IonCol>

  </IonRow>

</IonGrid>

);

};

export default LotItem;

// Price Component

const Prices = props => {

return (

<IonGrid>

  <IonRow>

    <IonCol size-md='6' offset-md='3'>

      <IonList>

        <IonButton onClick={() => {}}>

          <IonLabel>The Id is :{props.id}</IonLabel>

        </IonButton>

      </IonList>

    </IonCol>

  </IonRow>

</IonGrid>

);

};

export default Prices;

1 Like
          <IonItem
            routerLink={`/lot/${id}`}
            button
            onClick={() => <Prices id={id} />}
          >

You cannot render the Prices component in the onClick handler. It’s the router that will render the component matching the path in routerLink. To pass the id you need to use a URL parameter.

This is what I want to do, I have a list of Lots coming from a map function from Lots component and I am listing it on the LotItem component. Now onClick event of on an Item i want to forward all its information like it’s Id, name, description…etc
Is there a way i could do it with JS rather than tsx

Is there a way i could do it with JS rather than tsx

Just rename the file from *.tsx to *.jsx, remove any type annotations and what’s left is a regular JavaScript file.

i did all that, it still giving error on my lotPrice component when i am trying to access the id by accessing props.match.params.id or props.match.params.get(‘id’)
Cannot read property ‘params’ of undefined

The Ionic router extends React Router, passing URL params works in the same way.

Thank you very much , I imported {useParams} from react-router-dom then dis structure id from it. Then I have got my value, Thanks again…!!!