Seeking assistance with a basic issue.
I currently have an array. When I click on a specific link on the screen, I only want to display that person's page, showing their name rather than all of them at once.
Initially, the user page displays all users. However, I would like to navigate to a specific user's page when clicked. How can this be achieved?
The users are identified by userid, which may come in handy.
Below are the codes for both the Profile Page and Users Page:
const ProfilePage = () => {
const { posts, users } = useContext(UserContext);
return (
<>
{users.map((item, index) => {
return (
<>
<h1>{item.name}</h1>
</>
);
})}
</>
);
};
return (
<>
{users.map((item, index) => {
return (
<>
<a href={`/profile/${item.username}`}>
<List className={classes.root}>
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar alt="Remy Sharp" />
</ListItemAvatar>
<ListItemText
primary={item.email}
secondary={
<React.Fragment>
<Typography
component="span"
variant="body2"
className={classes.inline}
color="textPrimary"
>
{item.name}
</Typography>
{<br />}
{item.username}
</React.Fragment>
}
/>
</ListItem>
<Divider variant="inset" component="li" />
</List>
</a>
</>
);
})}
</>
);
For images of the User Page and Profile Page, see below:
User Page image: https://i.sstatic.net/2CeFC.png
Profile Page image: (initially displaying multiple names instead of just one)
https://i.sstatic.net/249NF.png