I structured my HOC so it could be invoked twice "functional programming". Now I'm failing to connect redux to get state and some functions. Please help how do I connect redux in this context. Everything I have tried has resulted in an error being thrown.
import React from "react"
export default (WrappedComponent) => {
return (mapFunctions) => {
return function({ ...props }) {
const [open, setOpen] = React.useState(false);
// typical functionality of the HOC
//search function
const handleSearch = (e) => {
let filter,
table,
tableRow,
tableCells,
txtValue,
results = [];
filter = e.currentTarget.value.toLowerCase();
table = document.querySelector(`#${mapFunctions.tableID}`);
tableRow = table.getElementsByTagName("tr");
Array.from(tableRow).forEach((row, index) => {
tableCells = row.getElementsByTagName("td")[1];
if (tableCells) {
txtValue = tableCells.textContent || tableCells.innerText;
if (txtValue.toLowerCase().indexOf(filter) > -1) {
return mapFunctions.searchFuncReasult === "array" ?
results.push(row) :
(tableRow[index].style.display = "");
} else {
return mapFunctions.searchFuncReasult === "array" ?
results.push(row) :
(tableRow[index].style.display = "none");
}
}
});
};
return (
<WrappedComponent {...props} handleSearch={handleSearch} />
);
};
};
};