App.js

import React from 'react';
import Accordion from './Accordion';

export default function App(){
return(
<div >
        {AccordionData.map((adata) => (
          <div>
            <Accordian title={adata.title} content={adata.content} />
          </div>
        ))}
      </div>

);
}

Accordion.js

import React, { useState } from "react";
import "./Accordian.css";

function Accordian(props) {
  const [isActive, setIsActive] = useState(false);

  return (
    <React.Fragment>
      <div>
        <div className="accordion">
          <div classname="accordian-item">
            <div className="accordion-title">
              <div onClick={() => setIsActive(!isActive)}>
                {props.title}
                <div className="moreSym">{isActive ? "-" : "+"}</div>
              </div>
            </div>
            <div>
              {/* {true && 1 && 2} 
           {false && "this is true"}  */}
              {isActive && (
                <div className="accordion-content">{props.content}</div>
              )}
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}
export default Accordian;

Accordion.css (Ref: github repo)

body {
  background: rgb(238, 174, 202);
  background: radial-gradient(
    circle,
    rgba(238, 174, 202, 1) 0%,
    rgba(199, 233, 148, 1) 100%
  );
}


h1 {
  text-align: center;
  margin: 2rem 0 4rem 0;
}

.accordion {
  max-width: 600px;
  margin: 2rem auto;
}

.accordion-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  cursor: pointer;
  background-color: #21aeca;
}

.accordion-title:hover {
  background-color: #3ab4cc;
}

.accordion-title,
.accordion-content {
  padding: 1rem;
}

.accordion-content {
  background-color: #39b9d2;
}

@media screen and (max-width: 700px) {
  body {
    font-size: 18px;
  }

  .accordion {
    width: 90%;
  }
}