How to pass arguments to a react function component from a JSX component using onClick

Question

Here is a very small snippet from my large code:

import React from "react";
const Home = () => {
    return (
      imgFilter.map((imgs) => {
        return ( <
          Col sm = "3"
          xs = "12"
          key = {
            imgs.id
          }
          className = "trend-image" >
          <
          img src = {
            imgs.path
          }
          alt = {
            imgs.id
          }
          className = "img-fluid"
          onClick = {
            Price
          }
          /> <
          /Col>
        )
      });
    }

In this code you can see in one line it is written onClick={Price} . Here Price is a function component which I'm importing. Now Price is designed to take an arguement. Here I want to pass the imgs.id to price when the image is clicked. How can I do it

Answer 1

make an arrow function and call Price with imgs.id

import React from "react";
const Home = () => {
    return (
      imgFilter.map((imgs) => {
        return ( <
          Col sm = "3"
          xs = "12"
          key = {
            imgs.id
          }
          className = "trend-image" >
          <
          img src = {
            imgs.path
          }
          alt = {
            imgs.id
          }
          className = "img-fluid"
          onClick = {() =>  Price(imgs.id)}
          /> <
          /Col>
        )
      });
    }