onClick expanding all profiles - reactjs

Question

The app is loading multiple profiles from an API. When a profile's corresponding button is clicked, that profile's grades should be displayed. The issue is when a button is clicked all profile grades are being displayed.
const Profiles = () => {
const [expand, setExpand] = useState(false)
const ToggleGrades = () => {
setExpand(prev => !prev)
}
return (
<>
<div className="profile-container">
<div className="profile-info">
<h1 className="profile-name">{profile.firstName} {profile.lastName}</h1>
<p className="profile-info">Email: {profile.email}</p>
<p className="profile-info">Company: {profile.company}</p>
<p className="profile-info">Skill: {profile.skill}</p>
<p className="profile-info">Average: {profile.grades}%</p>
{
expand &&
<ul>
<li key={profile.id[0]} className="profile-grades">Test 1: {profile.grades[0]}</li>
<li key={profile.id[1]} className="profile-grades">Test 2: {profile.grades[1]}</li>
<li key={profile.id[2]} className="profile-grades">Test 3: {profile.grades[2]}</li>
<li key={profile.id[3]} className="profile-grades">Test 4: {profile.grades[3]}</li>
<li key={profile.id[4]} className="profile-grades">Test 5: {profile.grades[4]}</li>
<li key={profile.id[5]} className="profile-grades">Test 6: {profile.grades[5]}</li>
<li key={profile.id[6]} className="profile-grades">Test 7: {profile.grades[6]}</li>
<li key={profile.id[7]} className="profile-grades">Test 8: {profile.grades[7]}</li>
</ul>
}
</div>
<div className="profile-grades-expander">
<button className="profile-expand-button" onClick={ToggleGrades}>{expand ? "-" : "+"}</button>
</div>
</div>
</>
);
}
export default Profiles;

Answer 1

You should specify which profile to expand, try to save the id of clicked profile in a state, and use this to check whether you should expand the profile or not.
Note:
Replace in the code profile.id with the correct one, I don't know the structure of the object profile.
const Profiles = () => {
const [profileToExpand, setProfileToExpand] = useState()
const ToggleGrades = (id) => {
setProfileToExpand(id)
}
return (
<>
<div className="profile-container">
<div className="profile-info">
<h1 className="profile-name">{profile.firstName} {profile.lastName}</h1>
<p className="profile-info">Email: {profile.email}</p>
<p className="profile-info">Company: {profile.company}</p>
<p className="profile-info">Skill: {profile.skill}</p>
<p className="profile-info">Average: {profile.grades}%</p>
{(profileToExpand === profile.id) &&
<ul>
<li key={profile.id[0]} className="profile-grades">Test 1: {profile.grades[0]}</li>
<li key={profile.id[1]} className="profile-grades">Test 2: {profile.grades[1]}</li>
<li key={profile.id[2]} className="profile-grades">Test 3: {profile.grades[2]}</li>
<li key={profile.id[3]} className="profile-grades">Test 4: {profile.grades[3]}</li>
<li key={profile.id[4]} className="profile-grades">Test 5: {profile.grades[4]}</li>
<li key={profile.id[5]} className="profile-grades">Test 6: {profile.grades[5]}</li>
<li key={profile.id[6]} className="profile-grades">Test 7: {profile.grades[6]}</li>
<li key={profile.id[7]} className="profile-grades">Test 8: {profile.grades[7]}</li>
</ul>
}
</div>
<div className="profile-grades-expander">
<button className="profile-expand-button" onClick={() => ToggleGrades(profile.id)}>{expand ? "-" : "+"}</button>
</div>
</>
)
})}
</div>
}
</div>
</>
);
}
export default Profiles;

Answer 2

The code example you posted seems incomplete. But reading between the lines, it seems that you have one variable "expand", defined in your Profiles component, which is used by all the profiles.
You should use nested components: A ProfileList component, and a SingleProfile component. The expand state variable should be in the SingleProfile component.