Boa tarde.
Eu tenho uma API em Strapi rodando no Heroku renderizada nesse site em Gatsby. Minha pergunta é: como poderia colocar as bandas em ordem alfabética? Por minhas pesquisas, teria que ser sort() no useEffect. Mas como? Já tentei de tantas formas que nem lembro mais...
Esse é meu useEffect:
useEffect(() => {
const loadBands = async () => {
const response = await api.get();
setBands(response.data);
setLoading(false);
};
loadBands();
}, []);
E minha renderização está assim:
{bands
.filter(val => {
if (searchBand == "") {
return val;
} else if (
val.band_name.toLowerCase().includes(searchBand.toLowerCase())
) {
return val;
}
})
.map(band => (
<article className="bands" key={band.id}>
<h2>{band.band_name}</h2>
<img
src={band.band_img.formats.thumbnail.url}
alt={band.band_name}
/>
{console.log(band.band_img)}
<p>{band.band_desc}</p>
<div className="btns">
<iframe
src={`https://open.spotify.com/embed/track/${band.band_site}`}
width="50%"
height="80"
frameBorder="0"
allowtransparency="true"
allow="encrypted-media"
/>
<a href={band.youtube} target="_blank">
<button>youtube</button>
</a>
<a href={band.wikipedia} target="_blank">
<button>wikipedia</button>
</a>
</div>
</article>
))}
Aqui está o repositório no Github se servir de algo para poderem me ajudar.
Desde já, muito grato pela paciência.