Rendering text after fetching data from database using React and AWS Amplify - reactjs

Question

I am trying to use React and AWS Amplify to build a web app that will make a request to the database and display some text accordingly. However, I encounter the following error:
Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
The error message also indicates that the error is occurring after setNfts(nftList);
App.jsx:
function App() {
const [nfts, setNfts] = useState([]);
const fetchNfts = async () => {
try {
const nftData = await API.graphql(graphqlOperation(listNfts));
const nftList = nftData.data.listNfts.items;
console.log('nft list', nftList);
setNfts(nftList);
} catch (error) {
console.log('error on fetching nfts', error);
}
};
useEffect(() => {
fetchNfts();
}, []);
return (
<div className="App">
<header className="App-header">
<AmplifySignOut />
<h2>My App Content</h2>
</header>
<Box sx={{ display: 'grid', columnGap: 3, gridTemplateColumns: 'repeat(3, 1fr)' }}>
{nfts.map((nft, idx) => {
return (
<NftCard filePath={nft.filePath} name={nft.name} creator={nft.creator} idx={idx} />
);
})}
</Box>
</div>
);
}
NftCard.jsx:
import React from 'react';
import { Paper } from '#material-ui/core';
export function NftCard(filePath, name, creator, idx) {
return(
<Paper variant="outlined" elevation={2} key={`nft${idx}`}>
<div className="nftCard">
<div>
<img src={filePath} alt="" width="100px" height="100px" />
<div className="nftTitle">{name}</div>
<div className="nftCreator">{creator}</div>
</div>
</div>
</Paper>
);
}

Answer 1

console.log('nft list', nftList);
Does this have any data logged out?
And if so, can you please provide output?

Answer 2

You can try to send data to Component with:
<NftCard filePath={nft["0"].filePath} name={nft["0"].name} creator={nft["0"].creator} idx={idx} />
and Show the result of that

Answer 3

The props passed to NftCard should be listed separately and have curly braces around them:
function NftCard({ filePath, name, creatorThumbnail, creator, price, idx }) {
...
}