code shows error when reading size of a variable - reactjs

Question

import React, { Component } from 'react';
import { render } from 'react-dom';
import Details from './Details';
import './index.css';
class App extends Component {
constructor() {
super();
this.state = {
usersData: [],
error: null,
selectedUser: null,
};
}
handleClick = (id) => {
const selectedUser = this.state.usersData.find(user => user.id === id)
this.setState(() => ({ selectedUser }))
}
findAlbum = (selectedUser, id) => {
fetch(`https://jsonplaceholder.typicode.com/users/${id}/albums`)
.then(response => response.json())
.then(data => {
selectedUser.albums = data;
})
.catch(err => this.setState({ error: err.message }))
}
setAlbum = (id) => {
const selectedUser = this.state.usersData.find(user => user.id === id)
this.findAlbum(selectedUser, id);
}
render() {
this.state.usersData.forEach(user => {
this.setAlbum(user.id)
})
const usersList = this.state.usersData.map(user => {
return <li key={user.id} onClick={() => this.handleClick(user.id)}>{user.name} {user.username} {user.email} {user.albums.size}</li>
})
return (
<>
<div className="UserList">
<h1>Users</h1>
<ul>{usersList}</ul>
</div>
<Details user={this.state.selectedUser} />
</>
);
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => {
this.setState({ usersData: data })
})
.catch(err => this.setState({ error: err.message }))
}
}
render(<App />, document.getElementById('root'));
When i am doing console.log selecteduser.albums inside findalbum function it is showing the data but when i did it in the li line it shows cant read size of undefined
i need to create a react app which shows list of users and their name username and email corresponding to each user we have albums we need to show album number also but i cant do it
is there any problem with pass by value or pass by reference in JS?

Answer 1

It's very wrong to update the state directly in react. Instead, use setState with a map and change anything related to a substate there. Also a tip, instead of passing the Id in the forEach and finding the user, just pass the user