How can I pass an array through JSX using setState?

Question

I am using QuillForms to create a form page that has the attribute "formObj" that takes in a list of JSON objects to render the form properly.

I want to pass a list of JSON objects through a component. Essentially, I would create a list of JSON objects that would be passed to a component inside of my return() jsx.

I used a function called getQuestions() in my Home.jsx that does the following:

 const getQuestions = () => {

  
    const questions = [...Array(parseInt(numQuestions)).keys()]

    let questionPairs = []
  
    questions.forEach((item, index) => {
      questionPairs.push({
        name: "short-text",
        id: String.valueOf(item),
        attributes: {
          classnames: "example",
          nextBtnLabel: "Next",
          required: true,
          label: "What would you like to suggest?"
        }
      })
    })

    return questionPairs;
  }

where numQuestions is any integer. However, the I tried implementing a setState variable inside of the function, similar to this post.

I also tried using the useEffect hook for React to try to get the questions as the page loaded. Every time I try to use the useState() inside of my function body, it keeps giving me an error saying too many rerenders.


<Form
        formId="2"
        formObj={{
          blocks: getQuestions(),
          settings: {
            animationDirection: "vertical",
            disableWheelSwiping: false,
            disableNavigationArrows: false,
            disableProgressBar: false
          },
          theme: {
            font: "Roboto",
            buttonsBgColor: "#9b51e0",
            logo: {
              src: ""
            },
            questionsColor: "#000",
            answersColor: "#0aa7c2",
            buttonsFontColor: "#fff",
            buttonsBorderRadius: 25,
            errorsFontColor: "#fff",
            errorsBgColor: "#f00",
            progressBarFillColor: "#000",
            progressBarBgColor: "#ccc"
          }
        }}
/>

I want to pass the array that is returned from the getQuestions() function into the attribute blocks, but the form does not render. I suspect there is a problem with the function not passing the values correctly because when I tried to debug it using console.log() and printing out the function value inside the function body, the complete list was returned.

Just a note for people familiar with QuillForms: How can I add more questions dynamically to the block attribute without having to call a function every render?

Any help would be appreciated! Thanks!

How can I pass an array through JSX using setState?

0 Answers0