I will explain with comments in code
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
function TableComponent(props){
const checkboxSearch = () => {
let tempVar = [[1,2,3],[3,2,1],[4,5,6]];
//containerID = index of chosen array
const container = document.getElementById("optionsContainer_"+containerID);
if (searchValue === " ") {
setUniques(props.unique);
}
const results = props.unique[containerID].filter((item) => {
if (item) {
if (typeof item !== "number") {
return item.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
} else {
return (
item.toString().indexOf(searchValue.toString().toLowerCase()) > -1
);
}
}
return null;
});
tempVar[containerID] = results;
setUniques(tempVar);
};
return(
uniques.map((item,index) => {
<child data={item} key={index}/>
})
}
and now child component:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
function TableHead(props) {
return (
<div id={props.keys[props.index]} className="optionsContainer">
{props.unique.map((item, key) => {
return (
<label key={key}>
<input
type="checkbox"
value={item ? item : "empty"}
/>
<p>
{item.toFixed(2)}
</p>
</label>
);
})}
</div>
);
}
when one of the arrays element changes it re-renders everything again, and I have more then 40k data and I'm using this method on input event listener so its really slow... any suggestions how to handle this?