Блог

Я пишу программу, в которой элементы печатаются в компоненте таблицы и отображается строка поиска. Изначально я записал все компоненты в один компонент (App.js ). Но теперь я пытаюсь разделить его на приложение, таблицу и поиск При печати значений через props в таблицу, я получаю ошибку:

 TypeError: Cannot read property 'toLowerCase' of undefined
  

Код:

App.js

 import React, { Component } from 'react';
import './App.css';
import Table from './components/Table';
import Search from './components/Search';

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,
  },
  {
    title: 'Redux',
    url: 'https://github.com/reactjs/redux',
    author: 'Dan Abramov, Andrew Clark',
    num_comments: 2,
    points: 5,
    objectID: 2,
    },
    {
      title: 'Redux',
      url: 'https://github.com/reactjs/redux',
      author: 'Dan Abramov, Andrew Clark',
      num_comments: 2,
      points: 5,
      objectID: 3,
      },
  ];

  //will print the above data through map function
  //iteratre through item object and will print each property
  //will print out 
class App extends Component {
  constructor(){
    super();
    this.state={
      list,
      searchText:''
    }
    this.onDismiss=this.onDismiss.bind(this);
    this.onSearchChange=this.onSearchChange.bind(this);
    //this.isSearched=this.isSearched.bind(this);
  }

  //to add a delete button
  onDismiss=(id)=>{
    //filter out item array and return results with no matched id
    const deleteList=this.state.list.filter(item=>item.objectID!==id);
    //setting state of list to lastest deleteList
    this.setState({
      list:deleteList
    })  
  }
  //to add a search bar
  onSearchChange=(e)=>{
    //set state to value in search bar
    this.setState({
      [e.target.name]:e.target.value
    })
  }


  render() {
    const {list,searchText}=this.state;
    return(
      <div>
       <Table
       list={list}
       onDismiss={this.onDismiss}/>
       <Search
       searchText={searchText}
       onSearchChange={this.onSearchChange}/>
      </div>
    )

  }
}
  

экспортировать приложение по умолчанию;

Table.js

 import React, { Component } from 'react';

class Table extends Component {


  render() {
    const {list,searchText}=this.props;
    return(
        <div>

       {/*Filter out item title and search title and give away results from item array */}
        {list.filter((item)=>{
          {/*The includes() method determines whether an array includes a certain value among its entries
          , returning true or false as appropriate. */}
          return item.title.toLowerCase().includes(searchText.toLowerCase());}).map((item)=>{

            return(

            <div key={item.objectID}>
                  {item.objectID}
                  {item.title}
                  <span>{item.author}</span>
                  <span>{item.num_comments}</span>
                  <span>{item.points}</span>
                <button onClick={()=>this.onDismiss(item.objectID)}>delete</button>
            </div>

          )})}
      </div>
    )

  }
}

export default Table;
  

Search.js

 import React, { Component } from 'react';

class Search extends Component {


  render() {
    const {searchText,onSearchChange}=this.props;
    return(
      <div>
          <input name="searchText" value={searchText}onChange={onSearchChange} type="text"></input>
      </div>
    )

  }
}

export default Search;
  

Решаемая проблема: я не передавал searchText в таблицу, поэтому она выдавала ошибку

 <Table
       list={list}
       onDismiss={this.onDismiss}
       searchText={searchText}/>