I'm trying to implement filtering on data I got from an API. Here is what I tried:
class ApiComponent extends Component {
constructor() {
super();
this.state = {
pizzas: [],
input: "",
};
}
onChangeHandler(e) {
this.setState({
input: e.target.value,
});
}
componentWillMount() {
axios.get("api/pizzas").then((Response) => {
this.setState({
pizzas: JSON.parse(JSON.stringify(Response.data)),
});
});
}
render() {
const list = this.state.pizzas
.filter((d) => this.state.input === "" || d === this.state.input)
.map((d, index) => <li key={index}>{d}</li>);
return (
<div className="container">
<form>
<input
value={this.state.input}
type="text"
onChange={this.onChangeHandler.bind(this)}
placeholder="search"
/>
</form>
{this.state.pizzas.map((pizza) => (
<ul key={pizza.id}>
{pizza.area_id}  {pizza.name} 
{pizza.real_name}
</ul>
))}
</div>
);
}
}
Whenever I try to input anything in my searchbox, I get this error:
Uncaught TypeError: d.includes is not a function
II'm using es6. So includes should be there.