[Solved]-How can I create and loop through a custom array within a react functional component?-Reactjs

First create an array which looks like this:

const faqArray = [{question: 'What is my question', answer: 'this is my answer'}, {question: 'What is another question', answer: 'this is another answer'}]

This is your new FAQ array which stores your questions and answers. Place it in your file under import "./FaqPage.scss"

import { useState } from "react"
import "./FaqPage.scss"

const faqArray = [{question: 'What is my question', answer: 'this is my answer'}, {question: 'What is another question', answer: 'this is another answer'}]

Next go to where it has the following:

{[0, 1, 2, 3, 4, 5, 6, 7, 8].map

and replace the [0, 1, 2, 3, 4, 5, 6, 7, 8] with {faqArray.map This is allowing your React component to loop over the contents in the new array that we just made.

then where it says

Lorem Ipsum is simply dummy text of the printing?

replace it with {data.question} This is replacing Lorem ipsum with your question that was stored in your FAQ array above.

Then where it has the paragraphs replace the paragraphs with <p>{data.answer}</p> This is taking the answer you placed in your FAQ array and displaying it here. Note this will all be placed within one paragraph tag, if you want multiple paragraph tags it will take more complicated code. I would suggest this for now.

Now whenever you want to add a new question just add it to the faqArray like this {question: 'New question', answer: 'New answer'} the question: and answer: are required as keys. don't change them unless you know what you are doing.

so with this new question it would look like this:

const faqArray = [{question: 'What is my question', answer: 'this is my answer'}, {question: 'What is another question', answer: 'this is another answer'}, {question: 'New question', answer: 'New answer'}]

After all is said and done your component should look like this:

import { useState } from "react"
import "./FaqPage.scss"

const faqArray = [{question: 'What is my question', answer: 'this is my answer'}, {question: 'What is another question', answer: 'this is another answer'}]

export default function FaqPage() {
  const [faqRow, setfaqRow] = useState(0)
  const faqToggle = (data) => {
    console.log(data)
    setfaqRow(data)
  }
  return (
    <>
      <section className="innerBAnner">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <h1>Frequently asked questions</h1>
            </div>
          </div>
        </div>
      </section>

      <section className="aboutPage">
        <div className="aboutLayerTwo">
          <div className="container">
            <figure className="mb-xl-5 mb-xl-5">
              <img src="img/img13.png" alt="" className="w-100 d-block" />
            </figure>
            <div className="row align-items-center pt-md-5"></div>
            <div className="row">
              {faqArray.map((data, ind) => (
                <div className="col-md-12">
                  <div className="faq-row">
                    <div
                      className="d-flex align-items-end  faq-head"
                      onClick={() => faqToggle(ind)}
                    >
                      <b>0{ind + 1}</b>
                      <h4 className="me-auto">
                        {data.question}
                      </h4>
                      <span>
                        {faqRow === ind ? (
                          <svg
                            width="19"
                            height="30"
                            viewBox="0 0 19 30"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M18.1189 14.6937L16.4545 12.95L4.40707 0.268555L0.731445 3.75596L11.1243 14.6937L0.731445 25.6315L4.40707 29.1189L16.4545 16.4374L18.1189 14.6937Z"
                              fill="#353535"
                            />
                          </svg>
                        ) : (
                          <svg
                            width="29"
                            height="18"
                            viewBox="0 0 29 18"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M14.4254 17.3875L16.1691 15.723L28.8506 3.67563L25.3632 -1.52439e-07L14.4254 10.3928L3.48764 -1.10865e-06L0.000232541 3.67563L12.6817 15.723L14.4254 17.3875Z"
                              fill="#353535"
                            />
                          </svg>
                        )}
                      </span>
                    </div>
                    {faqRow === ind && (
                      <div className="faq-body">
                        <p>
                          {data.answer}
                        </p>
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  )
}