I am learning React by following concepts from the tic-tac-toe tutorial. I am trying to create an online course providing platform. I have a bunch of filter buttons, each indicating a topic for course, for example, "Applied Mathematics". Since, there are a lot of filter buttons to display, I created an array of filter buttons, by populating them from a filter list array - which contains relevant data for each filter. This is the function that does this:
renderFilters() {
this.filterButtonList = [];
for (var index in this.filterList) {
index = parseInt(index);
var item = (
<FilterButton
key={this.filterList[index].param}
text={this.filterList[index].text}
param={this.filterList[index].param}
isActive={this.state.isActive[index]}
onClick={() => {
this.handleClick.bind(index);
this.handleClick(index);
}}
/>
);
this.filterButtonList.push(item);
}
return this.filterButtonList;
}
This function is called in the render function of the component we are concerned with:
render() {
return <div className="filters">{this.renderFilters()}</div>;
}
The filter list looks something like this:
this.filterList = [
{ text: "All Topics", param: "all-topics" },
{ text: "Algorithms and Data Structures", param: "#cat=engineering&subcat=computerscience&spec=algorithmsanddatastructures" },
{ text: "Artificial Intelligence", param: "#cat=engineering&subcat=computerscience&spec=artificialintelligence" },
{ text: "Computer Design and Engineering", param: "#cat=engineering&subcat=computerscience&spec=computerdesignandengineering" },
{ text: "Computer Networks", param: "#cat=engineering&subcat=computerscience&spec=computernetworks" },
{ text: "Cryptography", param: "#cat=engineering&subcat=computerscience&spec=cryptography" },
{ text: "Data Mining", param: "#cat=engineering&subcat=computerscience&spec=datamining" },
{ text: "Graphics and Visualization", param: "#cat=engineering&subcat=computerscience&spec=graphicsandvisualization" },
{ text: "Human-Computer Interfaces", param: "#cat=engineering&subcat=computerscience&spec=humancomputerinterfaces" },
{ text: "Operating Systems", param: "#cat=engineering&subcat=computerscience&spec=operatingsystems" },
{ text: "Programming Languages", param: "#cat=engineering&subcat=computerscience&spec=programminglanguages" },
{ text: "Software Design and Engineering", param: "#cat=engineering&subcat=computerscience&spec=softwaredesignandengineering" },
{ text: "Theory of Computation", param: "#cat=engineering&subcat=computerscience&spec=theoryofcomputation" },
{ text: "Algebra and Number Theory", param: "#cat=mathematics&subcat=algebraandnumbertheory" },
{ text: "Applied Mathematics", param: "#cat=mathematics&subcat=appliedmathematics" },
{ text: "Calculus", param: "#cat=mathematics&subcat=calculus" },
{ text: "Computation", param: "#cat=mathematics&subcat=computation" },
{ text: "Differential Equations", param: "#cat=mathematics&subcat=differentialequations" },
{ text: "Discrete Mathematics", param: "#cat=mathematics&subcat=discretemathematics" },
{ text: "Linear Algebra", param: "#cat=mathematics&subcat=linearalgebra" },
{ text: "Mathematical Analysis", param: "#cat=mathematics&subcat=mathematicalanalysis" },
{ text: "Mathematical Logic", param: "#cat=mathematics&subcat=mathematicallogic" },
{ text: "Probability and Statistics", param: "#cat=mathematics&subcat=probabilityandstatistics" },
{ text: "Topology and Geometry", param: "#cat=mathematics&subcat=topologyandgeometry" },
];
And, the implementation for the <FilterButton> is this:
class FilterButton extends React.Component {
render() {
return (
<button
className={this.props.isActive === "true" ? "filters-button active" : "filters-button"}
onClick={() => {
this.props.onClick();
}}
>
{this.props.text}
</button>
);
}
}
The implementation for handleClick(i) is this:
handleClick(i) {
//Nothing fancy, just trying to display the value of the passed index.
console.log(i);
}
However, clicking on any of the buttons only prints "23", rather than printing the index of the button clicked - for example, if I click on "All Topics" button - which has a index of "0" in this filter list, it should print "0", not "23". The same is true, if instead of index I passed something like this.filterList[index].text to display the button text - in which case, if I click on something like "Applied Mathematics" button or "Linear Algebra" button, it only prints "Topology and Geometry" (which is the value from last row of filter list). What am I doing wrong?
