REACT - Why isnt my Filter Method Working

Question

Im trying to simply create a search and results feature for an app. The value of the input should reflect the components listed in the CardList Array. The filter doesn't seem to update the CardList. I've logged steps along the way and I've come to the conclusion that its the filter I set up. I cant seem to figure out why it wont filter the list.

import React, {Component} from 'react';
import CardList from './CardList';
import {robots} from './robots';
import './index.css';

class App extends Component {
  constructor() {
    super()
    this.state = {
      robots: robots,
      searchfield: ''
    }
  }

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

  render() {
    const filteredRobots = this.state.robots.filter(robot => {
      return robot.name.toLowerCase().includes(this.state.searchfield.toLowerCase());
    });

    return (
      <div className="appAlign">
        <h1 className="appTitle">RoboFriends</h1>
        <input
          className="searchBox"
          type="search"
          placeholder="Search Robots"
          onChange={this.onSearchChange}
        />
        <CardList robots={filteredRobots} />
      </div>
    );
  }

  }


export default App;

Answer 1

The error is not caused by the filter function as I have tested it and it works. It most probably lies with the robots data-set. I have slightly modified the filter function here.

import React, { Component } from "react";
import CardList from "./CardList";
import { robots } from "./robots";

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

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

  render() {
    const filteredRobots = this.state.robots.filter(robot =>
      robot.name.toLowerCase().includes(this.state.searchfield.toLowerCase())
    );

    return (
      <div className="appAlign">
        <h1 className="appTitle">RoboFriends</h1>
        <input
          className="searchBox"
          type="search"
          placeholder="Search Robots"
          onChange={this.onSearchChange}
        />
        <CardList robots={filteredRobots} />
      </div>
    );
  }
}

export default App;

I have made a sandbox with your code which has a sample robots data and a Card that renders the filtered data-set. Take a look.