[ ReactJs ] Accordian ( https://codesandbox.io/s/accordian-5my4v )

App.js

import React, { Component } from "react";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      AccordionData: [
        { expanded: false, title: "collapse 1", body: "Accordian Example 1" },
        { expanded: false, title: "collapse 2", body: "Accordian Example 2" },
        { expanded: false, title: "collapse 3", body: "Accordian Example 3" },
        { expanded: false, title: "collapse 4", body: "Accordian Example 4" },
        { expanded: false, title: "collapse 5", body: "Accordian Example 5" },
        { expanded: false, title: "collapse 6", body: "Accordian Example 6" },
        { expanded: false, title: "collapse 7", body: "Accordian Example 7" },
        { expanded: false, title: "collapse 8", body: "Accordian Example 8" },
        { expanded: false, title: "collapse 9", body: "Accordian Example 9" },
        { expanded: false, title: "collapse 10", body: "Accordian Example 10" }
      ]
    };
  }

  abc = async index => {
    let AccordionData = JSON.parse(JSON.stringify(this.state.AccordionData));
    for (let i in AccordionData) {
      if (Number(i) === index) {
        AccordionData[i].expanded = !AccordionData[i].expanded;
      } else {
        AccordionData[i].expanded = false;
      }
    }
    await this.setState({ AccordionData });
  };

  render() {
    return (
      <div>
        {this.state.AccordionData.map((item, index) => {
          return (
            <div key={item.title}>
              <div
                style={{ background: "red" }}
                onClick={() => this.abc(index)}
              >
                <p>{item.title}</p>
              </div>
              {item.expanded ? (
                <div style={{ background: "blue", height: "40px" }}>
                  <p>{item.body}</p>
                </div>
              ) : null}
            </div>
          );
        })}
      </div>
    );
  }
}

export default Home;