i have my react redux project, that i am wanting to add a search to the menuItems Component. but i cant seem to figure out how to search over the existing map. ive created a input with the onChange event that sets the state to the input term. but i cant semm what to do after that.
class MenuItems extends Component {
state = {
searchTerm: '',
}
handleclick = (item) => {
this.props.deleteMenuItem(item.id);
}
handleSearch = (event) => {
this.setState({
[event.target.name]: event.target.value
})
}
filteredItem = () => {
let filtered = [...this.props.menuItems].filter(item => item.name === "burger")
}
render(){
let showItems = this.props.menuItems;
return (
<div>
<input
placeholder="search"
name="searchTerm"
type="text"
value={this.state.searchTerm}
onChange={this.handleSearch}
/>
{showItems.map((item) =>(
<li class="list" key={item.id}>
{item.name}
<br></br>
{item.body}
<br></br>
<img src={item.image}></img>
<br></br>
<button id={item.id} onClick={() => this.handleclick(item)}>delete </button>
</li>
))}
</div>
)
}
}
export default connect(null, {deleteMenuItem})(MenuItems)
It looks like you just need to filter with your searchTerm and it will work just fine.
class MenuItems extends Component {
state = {
searchTerm: "",
};
handleclick = (item) => {
this.props.deleteMenuItem(item.id);
};
handleSearch = (event) => {
this.setState({
[event.target.name]: event.target.value,
});
};
render() {
let showItems = this.props.menuItems;
const filtered =
[...this.props.menuItems].filter((item) =>
item.name.includes(this.state.searchTerm)
) ?? [];
return (
<div>
<input
placeholder="search"
name="searchTerm"
type="text"
value={this.state.searchTerm}
onChange={this.handleSearch}
/>
{showItems.map((item) => (
<li className="list" key={item.id}>
{item.name}
<br></br>
<button id={item.id} onClick={() => this.handleclick(item)}>
delete
</button>
</li>
))}
{filtered.map((item) => (
<li className="list" key={item.id}>
Filtered: {item.name}
<br></br>
</li>
))}
</div>
);
}
}
const App = () => {
return (
<div>
<MenuItems menuItems={[{ name: "name1" }, { name: "name2" }]} />
</div>
);
};