单击按钮后，React中的组件重复

REACT问题-单击按钮后，我想执行类似的操作来启动创建新组件的功能。此外，我希望div元素及其内容在每次单击按钮时出现。（就我而言，是我自己的组件）

例如，当我想创建问卷并添加问题时，我需要一个按钮让我为该问题添加输入。您知道，重复组件。

“ REACT.CreateElement”？哪个会循环出现？或者，也许您知道其他方法吗？

我尝试了CreateElement，customElements.define（），但我不知道这是正确的方法。现在，我训练使用。你能帮助我吗？预先感谢您，在我的代码下方：

**import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import DV from 'components/dataView/DataView'
import FieldsWrapper from 'components/fieldsWrapper/FieldsWrapper'
import FormMetaObject from 'components/form/components/form/FormMetaObject'

import Card from "components/card/Card"
import {Combobox} from  'components/form/components/combobox/Combobox'
import InputText from 'components/form/components/input/InputText'
import InputDateTime from 'components/form/components/input/InputDateTime/InputDateTime'
import { Checkbox } from 'components/form/Form';
import EnumListView from 'components/form/components/enumList/EnumListView'
import Button from 'components/button/Button';

const AddQ = () => {
    const [numberOfQuestion, setNumberOfQuestion] = useState(0);
 
 
    return <div>
       { setNumberOfQuestion(number => number++)}
       {console.log("FEUF")}
       {Array(numberOfQuestion).fill("").map((_, id) => <Questionnaire />)}
    </div>
}


const Questionnaire = ({data}) => {
    const {title} = data || {}

    return(
        <div>{`Tytuł: ${title}`}</div>
    )
}

const DataProvider = ({children}) => {
   const [state, setState] = React.useState([]);
   const url = "https://60226fc4ae8f8700177df76f.mockapi.io/api/v1/users/1/questionnaire"
   fetch(url)
   .then(response => response.json())
   .then(data => setState(data));

  return (
     
   <FormMetaObject
   
            data={{
                meta: {
                    dataType: 'text',
                    attributes: {
                        Login: {
                            name: 'Login',
                            label: 'adam',
                            type: 'String',
                            validations: [{ type: 'Required' }]
                        },
                    }
                },
                data: [
                    {
                        attributes: {
                        }
                    }
                ]
            }}
        >
 {children}
        </FormMetaObject>
  )}

function Content() {
   const [state, setState] = React.useState([]);
   const url = "https://60226fc4ae8f8700177df76f.mockapi.io/api/v1/users/1/questionnaire"
   fetch(url)
   .then(response => response.json())
   .then(data => setState(data));

   const values = [
        { id: 1, value: 'marketing' },
        { id: 2, value: 'IT' },
        { id: 3, value: 'tłumacze' },
        { id: 4, value: 'księgowość' },
        { id: 5, value: 'zarządzanie ' }
    ]
    const selected = []
    function onChange() { }

   return(
      <Card>
            <h4>Nowa ankieta</h4>
            <FieldsWrapper>
                <InputText name="Tytuł" />
                <InputText name="Opis" />
                <InputDateTime name ="Data rozpoczęcia ankiety"/>
                <InputDateTime name ="Data zakończenia ankiety"/>
            </FieldsWrapper>
            <FieldsWrapper>
                <Checkbox name ="Obowiązkowa"/>
                <Checkbox name ="Anonimowa"/>
                <Checkbox name ="Czy ankieta ma być wysłana do autora ankiety? "/>
            </FieldsWrapper>
                <EnumListView name ="do kogo ma trafić ankieta" values={values} selected={selected} onChange={onChange} />
            <FieldsWrapper>
                <Button color="link" onClick={() =>AddQ()}>Add</Button>
            </FieldsWrapper>
            <div id="ankieta" ></div>
     </Card>
         )}**