I am having a problem that I can’t figure out how to solve. I have a database with the following structure:
{
"id": 1,
"name": "Artist Name One",
"email": null,
"firstName": null,
"lastName": null,
"street": null,
"city": null,
"postalCode": null,
"country": null,
"minimumPayment": null,
"Currency": null,
"allocation": null,
"paypalEmail": null,
"paymentDetails": null,
"imageUrl": null,
"createdAt": "2023-03-23T21:13:07.000Z",
"updatedAt": "2023-03-23T21:13:07.000Z"
},
{
"id": 2,
"name": "Artist Name Two",
"email": null,
"firstName": null,
"lastName": null,
"street": null,
"city": null,
"postalCode": null,
"country": null,
"minimumPayment": null,
"Currency": null,
"allocation": null,
"paypalEmail": null,
"paymentDetails": null,
"imageUrl": null,
"createdAt": "2023-03-23T21:13:09.000Z",
}
I have a types.ts file where I have my prop:
export interface Artist {
id: number;
name: string;
email: string;
firstName: string;
lastName: string;
street: string;
city: string;
postalCode: string;
country: string;
minimumPayment: number;
Currency: string;
allocation: number;
paypalEmail: string;
paymentDetails: string;
imageUrl: string;
createdAt: string;
updatedAt: string;
}
I have a parent component called ArtistListPage, and a child component called ArtistList. My problem is that, for some reason, displayArtists is not showing up correctly in my HTML. I can see in the console that all the data coming from my database is passing correctly, but there seems to be an error in my map function that I can’t figure out. What am I doing wrong?
Currently, when I call my displayArtists function, I only see one artist with an undefined value. I’m not sure why this is happening, and I’m looking for guidance on how to debug and fix this issue.
I’m using React with TypeScript.
Code for reference:
Parent component ArtistListPage:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import ArtistList from '../components/ArtistList';
import { Artist } from '../types';
const ArtistsListPage: React.FC = () => {
const [artists, setArtists] = useState<Artist[]>([]);
const backendURL = 'http://localhost:5005';
useEffect(() => {
const source = axios.CancelToken.source();
axios
.get(`${backendURL}/artists/`, { cancelToken: source.token })
.then((response) => response.data)
.then((data) => setArtists(data));
// console.log(artists)
return () => {
source.cancel('Component got unmounted');
};
}, []);
return (
<div className="flex">
<div className="flex flex-col w-full">
<ArtistList artists={artists} />
</div>
</div>
);
};
export default ArtistsListPage;
Child component ArtistList:
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import ReactPaginate from 'react-paginate';
import { FiSearch } from 'react-icons/fi';
import { Artist } from '../types';
const ArtistList: React.FC<{ artists: Artist[] }> = ({ artists }) => {
if (artists == null) return <span>Loading...</span>;
const [pageNumber, setPageNumber] = useState<number>(0);
const [filterArtist, setFilterArtist] = useState<string>('');
const artistsPerPage: number = 18;
const pagesVisited: number = pageNumber * artistsPerPage;
const uniqueArtists: Artist[] = [];
const seenArtists: { [key: string]: boolean } = {};
for (const artist of artists) {
if (!seenArtists[artist.name]) {
uniqueArtists.push(artist);
seenArtists[artist.name] = true;
}
}
const filteredArtists: Artist[] = uniqueArtists.filter((artist: Artist) => {
if (artist == null) return false;
let keepArtist = true;
keepArtist &&=
filterArtist === '' ||
artist.name.toLowerCase().includes(filterArtist.toLowerCase());
return keepArtist;
});
console.log('Here my filteredArtists: ', filteredArtists);
const displayArtists = filteredArtists
.slice(pagesVisited, pagesVisited + artistsPerPage)
.map((artist) => {
return (
<div key={artist.name}>
<Link to={`/artists/${artist.name}`}>
<div className="bg-white py-4 text-center rounded-md shadow-lg mx-auto content-center">
{artist.imageUrl ? (
<img
src={artist.imageUrl}
alt="artist"
className="w-20 h-20 object-cover rounded-full mx-auto shadow-lg"
/>
) : (
<img
src="https://www.pngitem.com/pimgs/m/41-414928_face-head-line-art-clip-and-white-symbol.png"
alt="artist"
className="w-20 h-20 object-cover rounded-full mx-auto shadow-lg"
/>
)}
<p className="text-sm mt-3 text-black">{artist.name}</p>
</div>
</Link>
</div>
);
});
console.log(
'Pages visited:',
pagesVisited,
'Artists per page:',
artistsPerPage
);
console.log('Here my displayArtists: ', displayArtists);
return (
<div className="flex-1 px-10 my-20">
<div className="flex justify-between items-end">
<h1 className="text-3xl font-medium text-black">Artists</h1>
<p className="text-xs text-black">Help</p>
</div>
<div className="relative flex py-5 items-center">
<div className="flex-grow border-t border-gray-400"></div>
</div>
<div className="my-14">
<div>
<label htmlFor="table-search" className="sr-only">
Search
</label>
<div className="relative">
<div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<FiSearch className="w-5 h-5 text-black dark:text-black" />
</div>
<input
type="text"
id="table-search"
className="block w-full p-2.5 pl-10 text-sm text-black border border-gray-900 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-900 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Search Artist"
value={filterArtist}
onChange={(e) => setFilterArtist(e.target.value)}
/>
</div>
</div>
</div>
<div className="grid gap-4 md:grid-cols-6 content-center">
{displayArtists}
</div>
<div>
<ReactPaginate
className="flex items-center justify-end -space-x-px py-5"
previousLabel={'Previous'}
nextLabel={'Next'}
pageCount={Math.ceil(artists.length / artistsPerPage)}
onPageChange={({ selected }) => {
setPageNumber(selected);
}}
containerClassName={
'paginationBttns px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'
}
previousLinkClassName={
'previousBttn px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'
}
nextLinkClassName={
'px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'
}
disabledClassName={''}
activeClassName={
'paginationActive text-blue-600 border border-gray-300 bg-gray-50 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white'
}
pageLinkClassName={
'px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'
}
pageRangeDisplayed={10}
marginPagesDisplayed={0}
/>
</div>
</div>
);
};
export default ArtistList;