react-accessible-accordion | Accessible Accordion component for React | User Interface library

I'm new to react. Can anyone please tell how can I add an 'active' class to accordion item. I am Using React Accessible Accordion

Here's my Code,

Import Part

I am implementing React-accessible-accordion in my React application.The click functionality is working fine however, I do not see the arrow icon appearing on the accordion. I tried to compare it with the DOM structure shown in the example in npm and I see the div for the icon itself is not getting added to my DOM.

My code-

import React from 'react'; import ReactDOM from 'react-dom';

import { Accordion, AccordionItem, AccordionItemTitle, AccordionItemBody, } from 'react-accessible-accordion';

import 'react-accessible-accordion/dist/fancy-example.css'; import 'react-accessible-accordion/dist/minimal-example.css';

I am using react-accessible-accordion. I want to populate the innermost child component with the data received as props from the parent component.

To do so, I am doing something like below in my respective components:

Parent Component —

In my react application, I have created a stateless Function Component which has a button in the JSX. I want to write a click handler for that button but defining the click handler outside the function throws me error. I am learning react and I have seen many tutorials that mentions we should try to create more stateless component hence I am following this approach.

Here is how I am doing- My component-

In my React application, I have an array of objects which I get through an api response. I want to display each object detail in an accordion. I am using react-accessible accordion and have created a React Stateless Component. I want each of my accordion to represent one object of the array. I have my array of objects in dataProp and to iterate over that I have written my component like below-

Im using the following npm librarie :