Блог

Мне кажется, что передается функция, и я совершенно не понимаю, что делать, чтобы исправить эту ошибку. Я знаю, что передача этого кода непосредственно в OnChanged работает, но по какой-то причине, когда метод onSearchChange передается в качестве параметра в поле поиска, он думает, что это объект

Вот код, о котором идет речь

 import "./tachyons";
import Searchbox from "./Searchbox";
import CardList from "./CardList";
import {robots} from "./robots";


class App extends React.Component {

    constructor(){
        super();
        this.state = {
            robots:robots,
            searchfield:""
        }
    }
    onSearchChange = (event)=>{
        //console.log(event);
        const filteredRobots = this.state.robots.filter(robots=>{
            return robots.name.toLowerCase().includes(this.state.searchfield.toLowerCase());
        });
        console.log(filteredRobots);
    }

    render () {
        return (
            <div className='tc'>
                <h1 className='f1'>RoboFriends</h1>
                <Searchbox searchChange = {this.onSearchChange}/>
                <CardList robots={this.state.robots}/>
            </div>
        );
    }
}

export default App;
 

 import App from "./App"
const Searchbox  = (searchfield, searchChange)=>{
  return (
    <div className="pa2">
      <input
        className = "pa3 ba b--green bg-lightest-blue"
        type="search"
        placeholder="search robots"
        onChange = {searchChange}
      />
    </div>
  );
}
export default Searchbox;
 

Ваш компонент поля поиска не разрушает реквизиты:

 const Searchbox = (searchfield, onSearchChange)=>
 

против.

 const Searchbox = ({searchfield, onSearchChange})=>
 

Вы неправильно используете реквизит в Searchbox компоненте. Вам нужно обновить вот так:

 const Searchbox  = ({searchfield, onSearchChange})=>{...}