Why is the API data not transferring to my other module? React - reactjs

Question

For this project, I am attempting to transfer the data I have received from the API (a list of albums) and send them to another module in order to display the results based on whichever user has been selected. I'm using "useEffect()" in tandem with the "setAlbums()" function to set and send the album list data through a prop labeled "album". The problem is I am not receiving the data in the other module "AlbumList.js", so I can't display the user's album list. Can anyone find a solution to this? Please forgive all the logs, I'm new to working with React and have been trying to sort this out. Thanks so much for taking the time.
Here is the App.js file:
// App.js
import "./App.css";
import AlbumList from "./AlbumList";
import UserList from "./UserList";
function App() {
const controller = new AbortController();
const [users, setUsers] = useState([]);
const [user, setCurrentUser] = useState({});
const [albums, setAlbums] = useState([]);
document.title = 'Awesome Album App';
const userUrl = "https://jsonplaceholder.typicode.com/users";
// Loading Albums
useEffect(() => {
const albumUrl = `https://jsonplaceholder.typicode.com/albums?userId=${user.id}`;
async function loadAlbums() {
try {
const response = await fetch(albumUrl, { signal: controller.signal });
const json = await response.json();
console.log("Logging json: ", json)
setAlbums(json)
} catch (err) {
if (err.name === 'AbortError') {
console.log('Aborted', err)
} else {
throw err;
}
}
}
loadAlbums();
console.log("After loadAlbums: ", albums)
return () => {
controller.abort();
}
},[user])
// Loading Users
useEffect(() => {
async function loadUser() {
try {
const response = await fetch(userUrl, { signal: controller.signal });
const data = await response.json();
setUsers(...users, data);
} catch (err) {
if (err.name === 'AbortError') {
console.log('Aborted', err)
setUsers([])
} else {
throw err;
}
}
}
loadUser();
return () => {
controller.abort();
}
},[])
// Return JSX
return (
<div className="App">
<div className="left column">
<UserList users={users} setCurrentUser={setCurrentUser} />
</div>
<div className="right column">
<AlbumList user={user} album={album} />
</div>
</div>
);
}
export default App;
Here is the component that displays the albums:
// AlbumList.js
import React from "react";
function AlbumList({ user = {} }, albums) {
console.log("Logging inside of albumsList", albums)
if (albums.length) {
return albums.map((album, index) => {
return <li key={index}>{album.id}{album.title}</li>;
});
}
return (
<div>
<p>Please click on a user name to the left</p>
</div>
);
}
export default AlbumList;```

Answer 1

Is it because you are passing album={album} to the <AlbumList /> component when it should be albums={albums}? I'm not sure if this was just an error when you were transferring your code to Stack Overflow, but <AlbumList/> expects a prop of albums whereas you passed an album prop. Though, I'm curious as to why the compiler didn't throw an error for album not being defined - from what I can see, you only have the albums variable defined. Also, I believe you need to destructure the props in AlbumList.js like so
function AlbumList({ user = {} , albums}) {
(i.e. } should appear after the albums prop).