Trying to do Accordion with map

Question

I'm trying to make an Accordion list, and the details of the list I'm going to show it through map. The code is correct but it was not showing the output. Anyone can help me out in this?

I try this method `

    {
        listOfsuperHeros.map((item) => (
            
            <Accordion.Item key = {item.id} 
            eventKey = {item.id}>
                <Accordion.Header>{item.name}</Accordion.Header>
                <Accordion.Body><p> Power: {item.power}</p>
                </Accordion.Body>
            </Accordion.Item>
        
        ))
        
    }

Answer 1

It seems you're using react bootstrap.

Therefore please try the following.

import Accordion from "react-bootstrap/Accordion";

function BasicExample() {

const listOfsuperHeros = [{name:"nameA"},{name:"nameB"}];

  return (
    <Accordion defaultActiveKey="0">
      {listOfsuperHeros.map((item, key) => (
        <Accordion.Item eventKey={key} key={key}>
          <Accordion.Header>Accordion Item #1</Accordion.Header>
          <Accordion.Body>Some body content</Accordion.Body>
        </Accordion.Item>
      ))}
    </Accordion>
  );
}

export default BasicExample;