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