React TypeError: невозможно прочитать свойство searchField неопределенного

const CardList = ({ robots }) => {
  return (
    <div>
      {robots.map((user, i) => {
        return (
          <div
            key = {i}
            className = "bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5"
          >
            <img
              src = {`https://robohash.org/${user.id}?200x200`}
              alt = "Robot Based On Char."
            />
            <div>
              <h2>{user.name}</h2>
              <p>{user.email}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
};

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

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      robots: [],
      searchfield: ""
    };
  }

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

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

  render() {
    const { robots, searchfield } = this.state;
    const filteredRobots = robots.filter(robot => {
      return robot.name.toLowerCase().includes(searchfield.toLowerCase());
    });
    return (
      <div>
        <SearchBox searchChange = {this.onSearchChange} />
        <CardList robots = {filteredRobots} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<div id = "root"></div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.5.3/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.5.3/react-dom.min.js"></script>