WrenchBoardMainSite/src/components/Service/FAQServices.js

import React, { useEffect, useState } from 'react';
import thumb from '../../assets/images/service-page.jpg';
import ServiceSideMenu from './ServiceSideMenu';
import getConfig from './../../Config/config'
import {Link} from 'react-router-dom'
import FaqData from '../../Services/FaqData';

function FAQService() {
    let [faq, setFaq] = useState([])

    useEffect(()=>{
        FaqData().then(res => {
            console.log(res)
            setFaq(res.data.result_list)
        }).catch(err => {
            console.log('You got an error ========> '+ err)
        })
    },[])

    return (
        <>
            <section className="appie-service-details-area pt-100 pb-100">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-4">
                            <ServiceSideMenu />
                        </div>
                        <div className="col-lg-8">
                            <div className="service-details-content">
                                <div className="container-fluid">
                                    <h3>Frequently asked questions</h3>
                                </div>
                                <div class="accordion" id="accordionExample">
                                    {faq.map((item, index)=>(
                                        <div key={index} class="card">
                                            <div class="card-header" id={`heading${index}`}>
                                                <h2 class="mb-0">
                                                    <button class="btn btn-block text-left" type="button" data-toggle="collapse" data-target={`#collapse${index}`} aria-expanded="true" aria-controls={`collapse${index}`}>
                                                    {item.title}
                                                    </button>
                                                </h2>
                                            </div>
    
                                            <div id={`collapse${index}`} class={`${index > 0 ? 'collapse' : 'collapse show'}`} aria-labelledby={`heading${index}`} data-parent="#accordionExample">
                                            <div class="card-body">
                                                {item.msg}
                                            </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                                <div className='container-fluid text-center'>
                                    <p className='my-2'>Can't find an answer <Link to='/contact'>contact us</Link> </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}

export default FAQService;