Parent child component event handler in loop - reactjs

Question

I have created one child component and one parent component the child component gets called in from loop and event handlers also get called from prop but when i click on navlink from child component every click event is called
if first navlink is called then only handler for first navlink should be called.
import { NavLink } from "react-router-dom";
import React, { Component } from "react";
import axios from "axios";
// import SearchComponent from "../Common/SearchComponent";
// import Navbar from "../Common/Navbar";
import { CompanyId } from "../../locales/global.json";
import CategoryComponent from "./CategoryComponent";
class CategoryPageComponent extends Component {
state = {
Categories: []
};
componentDidMount() {
if (this.state.Categories.length === 0) this.bindCategoryData();
}
onCategorySearch = e => {
if (this.state.Categories.length === 0 && e === "")
this.bindCategoryData(0);
};
bindCategoryData = () => {
var $this = this;
axios
.post(
"http://fstrumplifyml.azurewebsites.net/api/ApiCategory/GetCategories",
{
companyid: CompanyId,
languageid: 1
}
)
.then(function(response) {
$this.setState({
Categories: response.data.Data
});
});
};
UpdateSubCategories = (categories, categoryId) => {
console.log(categories);
};
renderCategoryComponent = category => {
return (
<CategoryComponent
Category={category}
OnUpdateSubCategories={this.UpdateSubCategories.bind(this)}
/>
);
};
render() {
return (
<React.Fragment>
{/* <Navbar /> */}
<section className="space--sm">
<div className="container">
{/* <SearchComponent onSearch={this.onCategorySearch} /> */}
<div className="row">
{this.state.Categories.map(this.renderCategoryComponent)}
</div>
</div>
</section>
</React.Fragment>
);
}
}
export default CategoryPageComponent;
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
class CategoryComponent extends Component {
render() {
return (
<div className="masonry__item col-md-4 filter-computing">
<div className="product">
<NavLink
to={this.props.OnUpdateSubCategories(
this.props.Category.SubCategories,
this.props.Category.CategoryId
)}
>
<img
alt={this.props.Category.CategoryName}
className="ProductImage"
src={this.props.Category.ImageUrl}
/>
</NavLink>
<NavLink
className="block"
to={this.props.OnUpdateSubCategories(
this.props.Category.SubCategories,
this.props.Category.CategoryId
)}
>
<div>
<h5>{this.props.Category.CategoryName}</h5>
</div>
</NavLink>
</div>
</div>
);
}
}
export default CategoryComponent;

Answer 1

<NavLink
className="block"
to={this.props.OnUpdateSubCategories(
this.props.Category.SubCategories,
this.props.Category.CategoryId
)}
>
when you put a function call inside props, it will be called everytime when render() runs
you can use arrow functions in props
to={
()=>{this.props.OnUpdateSubCategories(
this.props.Category.SubCategories,
this.props.Category.CategoryId
)}
}
but a function instance will be created in every render
so it is better to create a function inside CategoryComponent