import React from 'react';
import PropTypes from 'prop-types';

const CollapseExpandChild = (props) => {
    return(
        <div role="button" aria-expanded={props.isOpened} tabIndex="-1" className="jp-collapse-outline">
            {props.childData.map(item =>(
                <div key={item.headerChild} aria-expanded={props.isOpened}>
                    <div className='jp-collapse-child-title jp-collapse-outline'>{item.headerChild}</div>
                    <div className='jp-collapse-child-content'>{item.child}</div>
                </div>))}
        </div>
    );
};

CollapseExpandChild.propTypes = {
    childData : PropTypes.arrayOf(PropTypes.shape({
        headerChild: PropTypes.string,
        child: PropTypes.string
    })).isRequired,
    isOpened:PropTypes.bool
};

export default CollapseExpandChild;