How to debug why my chatrooms are not appearing in React-Bootstrap?

Question

I really have tried every solution I can think of and the code seems to be fine. It is giving me no errors or signs of issues.

Objective - To display all the available chat rooms

Problem - Chat rooms are not appearing and in the source code the <GroupList> div is empty so no data is passing in..

Here's my code

import React from 'react';
import { ListGroup } from 'react-bootstrap';

function Sidebar() {
    const rooms = ["1st Room", "2nd Room"];
  return (
        <>
        <h2>Available Chat Rooms</h2>
        <ListGroup >
        {rooms.map((room, idx) => {
                <ListGroup.Item key={idx}>
                    {room}
                </ListGroup.Item>
            })}
            </ListGroup>
        </>
  );
}
export default Sidebar

const rooms = ["1st Room", "2nd Room"]; IS NOT PASSING INTO THE GROUP LIST. 

I have also tried the following code aswell

import React from 'react';
import { ListGroup } from 'react-bootstrap';

function Sidebar() {
    const rooms = ["1st Room", "2nd Room"];
  return (
        <>
        <h2>Available Chat Rooms</h2>
        {rooms.map((room, idx) => {
                    <ListGroup key={idx}>
                <ListGroup.Item >
                    {room}
                </ListGroup.Item>
            </ListGroup>
            })}
        </>
  );
}
export default Sidebar

Both deliver no errors so I don't know where to start or what to be looking for. I have read the React-Bootstrap docs and to no avail.

Answer 1

when you use "{}" add a "return" inside of it. when you use "()" just put directly the element.

Example of using "()"

{rooms.map((item,idx)=> (
      <ListGroup.Item key={idx}>
        {item}
      </ListGroup.Item> 
) 
)};

Example of using "{}"

{rooms.map((item,idx)=> {
  return (
          <ListGroup.Item key={idx}>
            {item}
            </ListGroup.Item> 
  )
})