मैं एक वेबसाइट से किसी विशेष खोज शब्द से संबंधित शीर्ष समाचारों को खींच रहा हूं, उन्हें प्रदर्शित कर रहा हूं और फिर प्रत्येक समाचार के बगल में एक खारिज बटन जोड़ रहा हूं ताकि उपयोगकर्ता चाहें तो उन्हें हटा सकें। कोड कुछ इस तरह जाता है:

import React, { Component } from "react";

const PATH_BASE = "https://hn.algolia.com/api/v1";
const PATH_SEARCH = "/search";
const PARAM_SEARCH = "query=";
const DEFAULT_QUERY = "redux";
const url = `${PATH_BASE}${PATH_SEARCH}?${PARAM_SEARCH}${DEFAULT_QUERY}`;
console.log(url);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      results: null,
      searchTerm: DEFAULT_QUERY
    };
    this.setTopSearchStories = this.setTopSearchStories.bind(this);
    this.onDismissID = this.onDismissID.bind(this);
  }
  setTopSearchStories(results) {
    this.setState({ results });
  }
  onDismissID(id) {
    const updatedHits = this.state.results.hits.filter(
      (item) => item.objectID !== id
    );
    this.setState({
      result: { ...this.state.results, hits: updatedHits }
    });
  }
  componentDidMount() {
    const { searchTerm } = this.state;
    fetch(`${PATH_BASE}${PATH_SEARCH}?${PARAM_SEARCH}${searchTerm}`)
      .then((response) => response.json())
      .then((results) => this.setTopSearchStories(results))
      .catch((error) => error);
  }
  render() {
    const { results, searchTerm } = this.state;
    if (!results) return null;
    const lists = results.hits;
    return (
      <div className="page">
        <Table list={lists} />
      </div>
    );
  }
}

class Table extends Component {
  render() {
    const { list } = this.props;
    return (
      <div>
        {list.map((item) => (
          <div key={item.objectID} className="table">
            <span>
              <a href={item.url}>{item.title}</a>
            </span>
            <span>{item.author}</span>
            <span>
              <button
                onClick={() => this.onDismissID(item.objectID)}
                type="button"
              >
                Dismiss
              </button>
            </span>
          </div>
        ))}
      </div>
    );
  }
}

export default App;

यह ठीक है, लेकिन जब मैं खारिज बटन पर क्लिक करता हूं तो कोड त्रुटि संदेश के साथ टूट जाता है "_this3.onDismissID एक फ़ंक्शन नहीं है"। ये क्यों हो रहा है?