Unable to get Searchbar to work

1

So I’m building a small React project that uses JSON data from a football api. Right now, I’m trying to create a search filter, however when I type in the input area, nothing gets filtered. Here’s what I have tried so far.

Main component

class Workorder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      teamStandings: [],
      isLoaded: false,
      filter: null,
      orderSelect: "asc"
    };
  }
  updateSearch(inputValue) {
    let filter = this.state.filter;

    this.setState({
      filter: inputValue
    });
  }

  componentDidMount() {
    this.fetchData();
  }
  fetchData = () => {
    var url = "http://api.football-data.org/v2/competitions/2021/standings";
    fetch(url, {
      method: "GET",
      headers: {
        "X-Auth-Token": "f745945cd7174080b9c6882dd9795fe5"
      }
    })
      .then(res => res.json())
      .then(data =>
        this.setState({
          teamStandings: data["standings"][0]["table"],
          isLoaded: true
        })
      )
      .catch(error => {
        console.log(error);
      });
  };

  compareAsc = (a, b) => {
    if (a["team"]["name"] < b["team"]["name"]) {
      return -1;
    }
    if (a["team"]["name"] > b["team"]["name"]) {
      return 1;
    }
    return 0;
  };
  compareDesc = (a, b) => {
    if (a["team"]["name"] < b["team"]["name"]) {
      return 1;
    }
    if (a["team"]["name"] > b["team"]["name"]) {
      return -1;
    }
    return 0;
  };

  handleDropDownChange = e => {
    this.setState({
      orderSelect: e.target.value
    });
  };

  render() {
    if (this.state.teamStandings === null) return null;

    if (String(this.state.orderSelect) === "asc") {
      this.state.teamStandings.sort(this.compareAsc);
    } else if (String(this.state.orderSelect) === "desc") {
      this.state.teamStandings.sort(this.compareDesc);
    }


    return (
      <main className={styles.main}>
        <div className="container">
          <Header isLoaded={this.state.isLoaded} />
          <SearchBar
            updateSearch={this.updateSearch}
            value={this.state.filter}
          />
          <DropDown
            handleDropDownChange={this.handleDropDownChange}
            orderSelect={this.state.orderSelect}
          />
          <TeamStandingsList
            filter={this.state.filter}
            teamStandings={this.state.teamStandings}
          />
        </div>
      </main>
    );
  }
}

export default Workorder;

Team Standings List component

import React from "react";
import styles from "./workOrderStyle.module.css";

const TeamStandingsListItem = props => {
  return (
    <div key={props.team["team"]["id"]}>
      {props.team["position"]} - {props.team["team"]["name"]}
      <div>Won - {props.team["won"]}</div>
      <div>Draws - {props.team["won"]}</div>
      <div>Lost - {props.team["lost"]}</div>
      <img
        className={styles.teamCrest}
        src={props.team["team"]["crestUrl"]}
        alt="team crest"
      />
    </div>
  );
};

class TeamStandingsList extends React.Component {
  filter(teamStandings) {
    if (!this.props.filter) {
      return teamStandings;
    }
    return teamStandings.filter(
      team => team.toLowerCase().indexOf(this.props.filter.toLowerCase()) >= 0
    );
  }

  render() {
    return (
      <ul>
        {this.filter(this.props.teamStandings).map((team, i) => (
          <TeamStandingsListItem team={team} key={i} />
        ))}
      </ul>
    );
  }
}

export default TeamStandingsList;

Search bar component

const SearchBar = props => {
  return (
    <div className="row">
      <div className="col">
        <input
          placeholder="search by team name"
          type="text"
          onChange={props.handleChange}
          value={props.search}
          className={styles.searchBar}
        />
      </div>
    </div>
  );
};

export default SearchBar;
3

Here it is

.button {
  width: 100%;
  padding: 15px;
}

.listItem {
  padding: 25px;
  text-decoration: none;
}

.main {
  margin-top: 4em;
}
.searchBar {
  padding: 15px;
  width: 100%;
  text-align: center;
}

.teamCrest {
  max-width: 100px;
  max-height: 100px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}