TypeError: Cannot read properties of undefined (reading 'ques')

Question

Keep getting this error TypeError: Cannot read properties of undefined (reading 'ques')

in FAQ file where the faq.ques is. if I add faq.src.ques then error shifts to src

everything is correct accordingly but still can't figure it out

any solution???

FAQs file

import FAQ from "./FAQ";

const FAQs = () => {
    const[faqs, setfaqs]= useState([
        {
            ques: 'question1',
            subtitle: "st1",
            answer: "answer1",
            open: true
        },
        {
            ques: 'question2',
            subtitle: "Pricing",
            answer: "answer2",
            open: false
        },
        {
            ques: 'question3',
            subtitle: "Pricing",
            answer: "question3",
            open: false
        },
    ]);
    
    const toggleFAQ = index => {
        setfaqs(faqs.map((faq, i) => {
            if(i === index) {
                faq.open = !faq.open;
            } else {
                faq.open = false;
            }
            return faq;
        }));
    }
    return (
    <>
        <div className="container">
            <div className="row">
                <div className="col-md-12">
                    <div className="faq-title">
                        <h1>FAQ</h1>
                    </div>
                </div>
            </div>
            <div className="row">
                <div className="col-md-12">
                    <div className="faq-content">
                        {faqs.map((faq, i) => {
                            <FAQ faq={faq} index={i} toggleFAQ={toggleFAQ}/>
                        })}
                    </div>
                </div>
            </div>
        </div>
    </>
    );
};
export default FAQs;

FAQ file

function FAQ({faq, index, toggleFAQ}) {
    return (
    <>
        <div className="panel-group" id="accordion">
            <div className="panel panel-default">
                <h4 className="panel-title">
                    <div>{faq.ques}</div>
                </h4>
                    <a data-toggle="#collapse" data-parent="#accordion" onClick={()=>toggleFAQ(index)}>+</a>
            </div>  
            <div id="collapse" className={"panel-collapse in" + (faq.open ? " collapse" : " ")}>
                <div className="panel-body">
                   <h5>{faq.subtitle}</h5>
                   <p>{faq.answer}</p>
                </div>
            </div>
        </div>
    </>
    );
};

export default FAQ;

... .

...........................................................................................................................................................................................................

Answer 1

it is array, and you should use faq[i]