How to do loop in json file in react

Question

I need basic help.

I have an array. When i click some link on the screen, i want to see just their page, i mean him/her name, not all of them.

First, user page has all of the users. If i click some of them, i want to go her/his page. How can i do this?

Users has userid, so it may help you.

ProfilePage codes: (it gives all of the users with item.name)

const ProfilePage = () => {
  const { posts, users } = useContext(UserContext);

  return (
    <>
      {users.map((item, index) => {
        return (
          <>
            <h1>{item.name}</h1>
          </>
        );
      })}
    </>
  );
};

Users page codes:

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>
          </>
        );
      })}
    </>
  );

Users page image:

Profile page image: (first users page. It should show just 1 name not all of them, i know i used map its wrong)

Answer 1

const ProfilePage = () => {
  const { posts, users } = useContext(UserContext);

  const { name } = useParams();//Your dynamic route name. Example: <Route path="/profile/:name">
  const filteredUsers = users.filter(item => item.name === name);//Find all users with name Bret

  //Ideally, you need to make a router with a dynamic ID, then there will be a unique user. Example: <Route path="/profile/:id">
  //const { id } = useParams();
  //const filteredUsers = users.filter(item => item.id === id);

  return (
    <>
      {filteredUsers.map((item, index) => {
        return (
          <>
            <h1>{item.name}</h1>
          </>
        );
      })}
    </>
  );
};