searchChange 未定义 no-undef

Question

SearchBox.js File is:

import React from 'react';

const SearchBox = ({ searchfield, searchChanger}) => {
return (
    <div className='pa2'>
        <input 
            className='pa3 b--green bg-light-blue'
            type='search'
            placeholder='search robots'
            onChange={searchChange}
        />
    </div>
);
}

export default SearchBox;

App.js File is:

import React, { Component } from 'react';
import CardList from './CardList';
import SearchBox from './SearchBox';
import { robots } from './robots';
import './App.css';
class App extends Component {
    constructor() {
        super()
        this.state = {
            robots: robots,
            searchfield:''
        }
    }

    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(response => response.json())
            .then(users => {this.setState({ robots: robots})});

    }

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

    render() {
        const filteredRobots = this.state.robots.filter(robots => {
           return  robots.name.toLowerCase().includes(this.state.searchfield.toLowerCase());
        })
        if (robots.length ===0) {
        return <h1>Loading</h1>
       }
        else {
          return (  
              <div className='tc'>
                    <h1 className='f1'>RoboFriends</h1>
                    <SearchBox searchChange={this.onSearchChange}/>
                    <CardList robots={filteredRobots} />
              </div>
            );
        }
    }   
}


export default App;

I was able to get rid of this error just by changing the order of import in App.js file, but later on its showing this error no matter what i do? please help in case I have any typing issue, if no then what is the problem

Answer 1

Your SearchBox should be:

const SearchBox = ({ searchfield, searchChange}) => {
return (
    <div className='pa2'>
        <input 
            className='pa3 b--green bg-light-blue'
            type='search'
            placeholder='search robots'
            onChange={searchChange}
        />
    </div>
);
}

export default SearchBox;

In your props there was searchChanger which is incorrect.