1

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} &emsp;{pizza.name}&emsp;
            {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.

mage 456
  • 55
  • 7

0 Answers0