Filter State In React Without Removing Data
I'm trying to make a react component that can filter a list based on value chosen from a drop-down box. Since the setState removes all data from the array I can only filter once. H
Solution 1:
Do not replace original data
Instead, change what filter is used and do the filtering in the render() function.
In the example below, the original data (called data) is never changed. Only the filter used is changed.
const data = [
{
id: 1,
text: 'one',
},
{
id: 2,
text: 'two',
},
{
id: 3,
text: 'three',
},
]
classExampleextendsReact.Component {
constructor() {
super()
this.state = {
filter: null,
}
}
render() {
const filter = this.state.filterconst dataToShow = filter
? data.filter(d => d.id === filter)
: data
return (
<div>
{dataToShow.map(d => <spankey={d.id}> {d.text}, </span>)}
<buttononClick={() =>
this.setState({
filter: 2,
})
}
>
{' '}
Filter{' '}
</button></div>
)
}
}
ReactDOM.render(<Example />, document.getElementById('root'))<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><body><divid='root' /></body>Solution 2:
Don't mutate local state to reflect the current state of the filter. That state should reflect the complete available list, which should only change when the list of options changes. Use your filtered array strictly for the view. Something like this should be all you need to change what's presented to the user.
change = (e) => {
returnthis.state.tree.filter(item => item.fileType === e.target.value)
}
Post a Comment for "Filter State In React Without Removing Data"