@DanCouper Bro you are awesome…
Here’s my issue -
I need to use this react-filter-search package in my react-app, in which there’s a component that is recieving array of data from the backend received using the get call made in the actions file with axios and the res.data is made available in the state to render in tabular format.
So I would like to use this package in such a way so I can filter out the input value in the search field leaving the matched data in the table.
As per the details of this package, the author mentioned here React Filter Search –
React Filter Search is simply a component that requires data in application state (needs to be an
object s and an input value. In turn, you’ll get back…
- filtered data based on user input
- all data in absence of any search input
This data flows back up in the form of
renderResults , which is a render prop that returns one of the above. So you’ll be responsible for setting up passing in data and an input value.
In this way, React Filter Search is unopinionated about how you store your data and how you handle user input in your application.
The magic happens in renderResults, which returns an array of objects. Your data has either been filtered based on user input, or not.
Filtering logic will iterate over any level of nesting in your data structure. Which means a good suggestion for this is something like user data or todo items that aren’t heavily nested at many levels.
To render your data, simply use .map() to render to the view–the data retains in the same structure. Return some inline JSX, or feed each element into a stateless React component that renders some UI.
Please help me solve this issue.