title: Is there a way to select and show a specific element of a sidebar on React?
body: <p>I'm developing a video chat app with React, and I need to select a specific user in a sidebar in order to show its name.</p>
  <p>How can I implement it?</p>
  <pre><code>import React, {useContext,useEffect, useState } from 'react';
  import { SocketContext } from '../Contexts/SocketContext';
  import axios from 'axios';
  import List from '@mui/material/List';
  import ListItem from '@mui/material/ListItem';
  import ListItemText from '@mui/material/ListItemText';
  import ListItemAvatar from '@mui/material/ListItemAvatar';
  import Avatar from '@mui/material/Avatar';
  import * as Constants from '../Constants';
  
  let users = []
  axios.get(Constants.GET_ALL_USERS).then(res =&gt; { users = res.data; })
  
  const SideList = () =&gt; {
  const [idToCall, setIdToCall] = useState('');
  
  return (
  &lt;List&gt;
      {
          users.map(function(item, i){
            console.log('test');
            return(
                &lt;ListItem&gt;
                  &lt;ListItemAvatar&gt;
                    &lt;Avatar&gt;{ item.username.toUpperCase().charAt(0) }&lt;/Avatar&gt;
                  &lt;/ListItemAvatar&gt;
                  &lt;ListItemText
                    primary = { item.username }
                  /&gt;
                &lt;/ListItem&gt;
            );
          })
      }
  &lt;/List&gt;
  );
  };
  
  export default SideList;  
  </code></pre>