Filtrowanie danych API React

Cześć, tworzę sobie mały projekt do przećwiczenia Reacta. Jest to mała apka, która korzysta z zewnętrznego API. Krótki opis jej działania:
Po wpisaniu utworu bądź artysty, a następnie po kliknięciu buttona Search, wyświetlane są divy w których znajduje się: Nazwa zespołu/artysty, nazwa piosenki oraz dostępne tabulatury.
Problem mam z przefiltrowaniem wyników na podstawie wybranego selecta. Na przykład jeżeli w select wybiorę "Chords" to chciałbym aby wyskoczyły wyniki, które zawierają w dostępnych tabulaturach własnie Chords + inne jeżeli posiada. Już pobiera mi wartość z wybranego selecta, jednak kompletnie nie wiem gdzie i jak przefiltorwać wyniki, bardzo proszę o pomoc!

Sandbox: https://codesandbox.io/s/react-example-ys6py?fontsize=14&hidenavigation=1&theme=dark

class Search extends React.Component {
  state = {
    searchValue: "",
    songs: [],
    musicTabs: ["Dowolne", "Bass", "Player", "Chords", "Guitar"],
    result: ""
  };

  handleOnChange = event => {
    this.setState({ searchValue: event.target.value });
  };

  handleSelectChange = event => {
    this.setState(
      {
        result: event.target.value
      },
      () => console.log(this.state.result)
    );
  };

  handleSearch = () => {
    this.makeApiCall(this.state.searchValue);
  };

  makeApiCall = async searchInput => {
    let api_url = `https://www.songsterr.com/a/ra/songs/byartists.json?artists=${searchInput}`;
    const response = await fetch(api_url);
    const songs = await response.json();
    this.setState({ songs });
  };

  render() {
    return (
      <div>
        <input
          name="text"
          type="search"
          placeholder="Wyszukaj..."
          onChange={event => this.handleOnChange(event)}
          value={this.state.SearchValue}
        />

        <Select
          optionValue={this.state.musicTabs}
          change={this.handleSelectChange}
          value={this.state.result}
        />

        <br />
        <button onClick={this.handleSearch}>Search</button>

        {this.state.songs ? (
          <div>
            {this.state.songs.map((song, index) => (
              <div key={index} className="lists">
                <h1>
                  Wykonawca: <span>{song.artist.name}</span>
                </h1>
                <h2>
                  Tytuł piosenki: <span>{song.title}</span>
                </h2>
                <ol>
                  <b>Dostępne tabulatury:</b>
                  {song.tabTypes.map((tab, index) => (
                    <li key={index}> {song.tabTypes[index]} </li>
                  ))}
                </ol>
              </div>
            ))}
          </div>
        ) : (
          <p>Something</p>
        )}
      </div>
    );
  }
}

const Select = props => {
  const { optionValue, change } = props;

  const valueMusicTabs = optionValue.map((musicTab, index) => {
    return (
      <option name={optionValue[index]} key={index}>
        {" "}
        {optionValue[index]}{" "}
      </option>
    );
  });

  return <select onChange={change}>{valueMusicTabs}</select>;
};

po prostu za nim je wyświetlasz.
ta funkcja będzie retworzona za każdym state update.

const filtered = () => {
 return state.songs.filter()..
}

return {
 <div>{filtered.map()...}</div>
}

Mógłbyś proszę to bardziej rozwinąć? Gdzie wstawić tego returna? Jestem na początku przygody z Reactem i już mam przegrzaną głowę...

to jest ten return który masz i jedyny jaki może być. Po prostu zanim wyświetlisz dane przefiltruj je. Np. metodą filter, a jakie wartości i po jakich masz przefiltrować weżmiesz ze store-a.

Wykombinowałem coś takiego: https://codesandbox.io/s/react-example-fsspo?fontsize=14&hidenavigation=1&theme=dark
Jednak po wpisaniu i wybraniu i kliknieciu search nic nie wyskakuje, dodatkowo nie wysypuje żadnych błędów...

phanc napisał(a):

to jest ten return który masz i jedyny jaki może być. Po prostu zanim wyświetlisz dane przefiltruj je. Np. metodą filter, a jakie wartości i po jakich masz przefiltrować weżmiesz ze store-a.

Mógłbyś pokazać jak to zrobić? Bardzo proszę

po wpisaniu 'ra' coś się wyświetla, trochę nie wiem co się u ciebie dzieje.
Sprawdż 2 rzeczy.

1. Czy poprawnie filtrujesz, czy to wyrażenie jest dobrze napisane, sprawdasz czy tab == czemuś, na pewno?
2. wyświetlasz state.songs, A nie powinienieś wyświetlać toDisplay ? (taką masz zmienną w state)
   sprawdż czy nie nadpisujesz state.songs przy czymś.
   Na razie za bardzo nie wiem co się tam u ciebie dzieje.

w ogóle nie używasz toDisplay (odfiltrowane piosenki). U Ciebie w renderze zawsze masz this.state.songs.map. Filtrowanie też mocno kulawe song.tabTypes === selected u Ciebie selected może być ["Dowolne", "Bass", "Player", "Chords", "Guitar"], a widzę, że tabTypes przychodzą tabTypes: ["PLAYER", "TEXT_GUITAR_TAB", "CHORDS", "TEXT_BASS_TAB"]. Nie chcę być niemiły ale tutaj wychodzi brak znajomości podstaw programowania, React nie jest tutaj problemem.