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;
2

What does this file look like?

Also, tell us exactly what you are typing into the search bar and what you expect to happen that is not happening. Explain in detail what you mean by “nothing gets filtered”.

Actually, you have several components referenced, but since we do not have the code for them, we can not test out your code.

Please provide a link to your full project code (i.e. codepen or codesandbox) so we do not have to try and piece your app together.

Thanks.

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;
}
4