Garmaine Staff asked 2 years ago
import React, { Component } from 'react';
  import './App.css';

  const list = [
    {
      title: 'React',
      url: 'https://facebook.github.io/react/',
      author: 'Jordan Walke',
      num_comments: 3,
      points: 4,
      objectID: 0,
    },
    {
      title: 'Redux',
      url: 'https://github.com/reactjs/redux',
      author: 'Dan Abramov, Andrew Clark',
      num_comments: 2,
      points: 5,
      objectID: 1,
    },
  ];

  class App extends Component {


    state = {
      list,
      text: 'abc',
      searchTerm: ''
    }



    onDisMiss = (id) => {
      const updateList = this.state.list.filter((item) => item.objectID != id)
      return () => this.setState({ list: updateList })
    }

    onSearchChange = (event) => {
      this.setState({ searchTerm: event.target.value })
    }

    isSearched = (searchTerm) => {
      return (item) => item.title.toLowerCase().includes(searchTerm.toLowerCase())
    }

    render() {
      const { searchTerm, list } = this.state
      return (
        <div>
          <Search value={searchTerm}
            onChange={this.onSearchChange}>Search</Search>
          <Table list={list} pattern={searchTerm} onDissMiss={this.onDisMiss} />
        </div>
      );
    }
  }


  class Search extends Component {
    render() {
      const { value, onChange, children } = this.props
      return (
        <div>
          <form>
            {children}<input type="text" onChange={onChange} value={value} />
          </form>
        </div>
      );
    }
  }


  class Table extends Component {

    render() {
      const { list, pattern, onDisMiss } = this.props
      return (
        <div>
          {list.filter(isSearched(pattern)).map(item =>
            <div key={item.objectID}>
              <span><a href={item.url}>{item.title}</a></span>
              <span>{item.author}</span>
              <span>{item.num_comments}</span>
              <span>{item.points}</span>

              <span>
                <button onClick={onDisMiss(item.objectID)} type="button">Dismiss</button>
              </span>

            </div>)
          }
        </div>
      );
    }
  }
  export default App;

Road to react Book The Table component related.I get undefined for the isSearched method. how can I fix it so it works correctly its from the book road to react it seems like the book has a few error which I have problems solving because am just learning react. can you help with the solution and why this problem is actually happening