{"size": 1480, "ext": "js", "max_stars_repo_path": "src/pages/About/FAQ.js", "max_stars_repo_name": "kernelcon/website-2019", "max_stars_repo_stars_event_min_datetime": "2020-03-27T14:22:56.000Z", "max_stars_repo_stars_event_max_datetime": "2020-03-27T14:22:56.000Z", "max_issues_repo_path": "src/pages/About/FAQ.js", "max_issues_repo_name": "kernelcon/website-2019", "max_issues_repo_issues_event_min_datetime": "2020-09-04T14:25:46.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-08T22:26:40.000Z", "max_forks_repo_path": "src/pages/About/FAQ.js", "max_forks_repo_name": "kernelcon/website-2019", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 10, "max_forks_count": null, "avg_line_length": 20.8450704225, "max_line_length": 86, "alphanum_fraction": 0.5418918919}
import React, { Component } from 'react';
import Collapse, { Panel } from 'rc-collapse';
import faqConfig from 'faqConfig';
import './About.scss';

require('rc-collapse/assets/index.css');

class FAQ extends Component {
  static displayName = 'FAQ';

  constructor(props) {
    super(props);
    this.state = {
      accordion: false,
      activeKey: ['0'],
    };
  }

  static propTypes = {};
  static defaultProps = {};

  onChange = (activeKey) => {
    this.setState({
      activeKey,
    });
  }

  render() {
    const accordion = this.state.accordion;
    const activeKey = this.state.activeKey;

    const faq = faqConfig.map((ele, idx) => {
      const question = (
        <div className='faq-question'>
          <span className='faq-q'>Q</span>
          <span className='question'>{ele.question}</span>
        </div>
      );

      const answer = (
        <div className='faq-answer'>
          <span className='faq-a'>A</span>
          <span className='answer' dangerouslySetInnerHTML={{ __html: ele.answer }} />
        </div>
      );

      return (
        <Collapse className='faq-single'
          onChange={this.onChange}
          accordion={accordion}
          activeKey={activeKey}
          key={idx}>
          <Panel header={question}
            key={idx}>
            {answer}
          </Panel>
        </Collapse>
      );
    }); 


    return (
      <div className='faq-list'>
        {faq}
      </div>
    );
  }
}

export default FAQ;
