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;

... .

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

CodePudding user response：

You're passing faq as src and not as faq. Just change it to:

<FAQ faq={faq} index={i} toggleFAQ={toggleFAQ}/>

CodePudding user response：

There are multiple issues with your code.

1. Quote issue
2. No return on Map
3. key is missing in the map

Please find the updated code.

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) => {
                            return <FAQ faq={faq} index={i} key={i} toggleFAQ={toggleFAQ} />;
                        })}
                    </div>
                </div>
            </div>
        </div>
    </>
);

}; export default FAQs;

and for 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-parent="#accordion"
                        data-toggle="#collapse"
                        onClick={() => toggleFAQ(index)}
                    >
                         
                    </a>
                </div>
                <div className={'panel-collapse in'   (faq.open ? ' collapse' : ' ')} id="collapse">
                    <div className="panel-body">
                        <h5>{faq.subtitle}</h5>
                        <p>{faq.answer}</p>
                    </div>
                </div>
            </div>
        </>
    );
}
export default FAQ;