React filtering a list - reactjs

Question

I can't figure out the logic for the callback function in the below codepen.
As it stands the list gets filtered as the user types in a value to the input field. I can't figure out how to then bring the list back, if the filter gets removed.
https://codepen.io/benszucs/pen/BPqMwL?editors=0010
class Application extends React.Component {
state = {
options: ['Apple', 'Banana', 'Pear', 'Mango', 'Melon', 'Kiwi']
}
handleFilter = (newFilter) => {
if (newFilter !== "") {
this.setState(() => ({
options: this.state.options.filter(option => option.toLowerCase().includes(newFilter.toLowerCase()))
}));
}
};
render() {
return (
<div>
<Filter handleFilter={this.handleFilter} />
{this.state.options.map((option) => <p>{option}</p>)}
</div>
);
};
}
const Filter = (props) => (
<div>
<input name="filter" onChange={(e) => {
props.handleFilter(e.target.value);
}}/>
</div>
);
ReactDOM.render(<Application />, document.getElementById('app'));

Answer 1

Since you are overwriting the original value of the state, you won't able to reverse it. I would recommend to create a new state called filter, and update its value in the onChangeHandler(). And in the render() method you should filter the results before displaying them.
Example:
// the state
this.state = {
users: ['abc','pdsa', 'eccs', 'koi'],
filter: '',
}
// the change handler
onChangeHandler(e) {
this.setState({
filter: e.target.value,
});
}
// displaying the results
const list = this.state.users.filter(u => u.includes(this.state.filter)).map(u => (
<li>{u}</li>
));

Answer 2

In your handle Filter you can set the state to its default value
handleFilter = (newFilter) => {
if (newFilter !== "") {
this.setState(() => ({
options: this.state.options.filter(option => option.toLowerCase().includes(newFilter.toLowerCase()))
}));
} else {
this.setState(() => ({
options: ['Apple', 'Banana', 'Pear', 'Mango', 'Melon', 'Kiwi']
}));
}
https://codepen.io/RACCH/pen/pZxMRJ