This message was deleted.

sure

<ParticipantLoop>
  <ParticipantName />
</ParticipantLoop>

thank you

Small addition: you have to use the

useParticipants

hook to get the participants and pass it into the

ParticipantLoop:

const participants = useParticipants();
 <ParticipantLoop participants={participants}>
   <ParticipantName />
 <ParticipantLoop />

oh, sorry, thanks @eager-zoo-16408!

hello @eager-zoo-16408 I tried to do as you recommended here is my code

import { LiveKitRoom, VideoConference, RoomContext, ConnectionQualityIndicator, ControlBar, useParticipants, ParticipantLoop, ParticipantName } from '@livekit/components-react';

const room = useMemo(() => new Room(), []);
const participants = useParticipants();

  return (
    <main data-lk-theme="default" style={{ width: '100%', height: '100%' }}>
      <LiveKitRoom 
        room={room} 
        token={tokenUserLK} 
        serverUrl={devUrl}
        connect={true}
        audio={true}
        video={true}
                onConnected={() => {
          console.log("done");
        }}
      >
      <VideoConference />
        <ParticipantLoop participants={participants}> 
          <ParticipantName />
        </ParticipantLoop>

      </LiveKitRoom>
    </main>
  );
};

having this line

const participants = useParticipants();

it crashes the application here's the error :

react-dom.production.min.js:189 Error: No room provided, make sure you are inside a Room context or pass the room explicitly
    at fC (room-context.ts:37:11)
    at TC (useRemoteParticipants.ts:26:16)
    at NC (useParticipants.ts:24:30)

hooks.tsx:608 React Router caught the following error during render Error: No room provided, make sure you are inside a Room context or pass the room explicitly
    at fC (room-context.ts:37:11)
    at TC (useRemoteParticipants.ts:26:16)
    at NC (useParticipants.ts:24:30)

please help me if you have an idea

The

useParticipants()

hook depends on the room context. To get the room context, you need to use the hook inside the

<LiveKitRoom>

component. An easy way to do this is to create a React component like this:

function MyParticipantList(){
const participants = useParticipants();
return (
  <ParticipantLoop participants={participants}> 
    <ParticipantName />
  </ParticipantLoop>
  )
}

and then use it as a child of LiveKitRoom:

<LiveKitRoom 
        room={room} 
        token={tokenUserLK} 
        serverUrl={devUrl}
        connect={true}
        audio={true}
        video={true}
                onConnected={() => {
          console.log("done");
        }}
      >
 <VideoConference />
 <MyParticipantList />
</LiveKitRoom>

I'll give it a try. Thanks a lot.

Some docs around context can be found here: https://docs.livekit.io/reference/components/react/concepts/contexts/