为什么我的过滤器功能不起作用？

Question

simple react component that should be filtering a list. not working and i have no idea why...

import React from 'react';

class Filter extends React.Component {
  state = {
    input: '',
    items: [{name: 'lol'}]
  }

  handleChange = (event) => this.setState({ input: event.target.value })

  render(){
    const { input, items } = this.state;
    return(
      <div>
        <input
          placeholder="search for an item"
          onChange={this.handleChange}
        />
        {items.filter(term => term.includes(input)).map((term) => (
          <div>{term.name}</div>
        ))}
      </div>
    )
  }
}

export default Filter;

literally filtering the array, then mapping over it....

Answer 1

import React from 'react';

class Filter extends React.Component {
  state = {
    input: '',
    items: [{name: 'lol'}],
    filteredItems: false,
  } 

   filter(e) {
          var value = e.target.value;
          this.setState({filterval: value})

          this.setState({
            filteredItems: !value
              ? false
              : this.state.items.filter(function (item) {
                return item.name.toLowerCase().indexOf(value.toLowerCase()) !== -1;
              })
          })
        }


    render(){



            var list = this.state.filteredItems || this.state.items || []

            return (
             <div>
         <input placeholder="search for an item" onChange={this.filter.bind(this)}
        />
<div>

              {list.map((item,index) => (


                           <div>{term.name}</div>
                        ))}
</div>    
 </div>
 )

Answer 2

items.filter(term => term.includes(input))

The condition here is not correct. The variable term is an object {name: 'lol'} . The includes is not available for an object. It's should be term.name.includes(input) or term.name === input