React - Duplikowanie komponentu po naciśnięciu przycisku

Question

Chciałbym coś takiego zrobić, aby po kliknięciu przycisku uruchomić funkcję tworzenia nowego komponentu. Ponadto chcę, aby element div z zawartością pojawiał się za każdym razem, gdy kliknę przycisk. (w moim przypadku mój własny komponent)

Na przykład, gdy chcę utworzyć kwestionariusz i dodać pytania, potrzebuję przycisku, który pozwala mi dodać dane wejściowe do tego pytania. Zduplikować komponenty.

Stworzyłem 3 funkcje, które coś tam robią podobnego albo tak mnie naprowadzono na forach ("Adding", AddQ" i "AddQuestion") , ale nie wiem, która jest najbliższa rozwiązaniu. Czy możesz mi pomóc, naprowadzić? :c? 3 dni próbuję to zrobić. Z góry dziękuję za poświęcony czas. Poniżej stawiam kod 
 

const Adding = () => {
	const components = [
		"What time is it?",
		"Can I ask a follow up?"
	  ]

	  components.map((question, index) => (   
		<Button key={index}/>
	  ))
}

//customElementsRegistry.define('input-text', Button , { extends: 'div' });

const AddQ = () => {
	let counter = 0;
const newEl = document.createElement("input-text"); // ta funkcja tworzy tyle komponentów ile chce ale tylko np divy
newEl.innerText = `przykładowy tekst ${++counter}`;
const div = document.querySelector("#ankieta"); 
div.appendChild(newEl);
}

function AddQuestion(){
const el = React.createElement("Button", {}, 'My First React Code');  // ta funkcja renderuje mi tylko jeden w tym wypadku button 

	ReactDOM.render(
		el,
		document.getElementById('ankieta'))
}


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

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

function Content() {

   return(
      <Card>
				<Button color="link" onClick={() =>Adding()}>Dodaj</Button>
     </Card>
         )}

 

Answer 1

Już raz Ci na to odpowiedziałem mogłeś tam dopytać ;) 

https://forum.pasja-informatyki.pl/530719/powielanie-swojego-komponentu-w-react

 

Dobrą praktyką jest wywołanie tylko raz ReactDOM.render więc uzupełniając mój przykład : 
 

const App = () => {
    const [numberOfQuestion, setNumberOfQuestion] = useState(0);
 
 
    return <div>
       <button onClick={() => setNumberOfQuestion(number => number++)} >Add</button>
       {Array(numberOfQuestion).fill("").map((_, id) => <SomeQuestionComponent key={id}/>)}
    </div>
}

ReactDOM.render(
        <App />,
        document.body
)

 

Comments

Tak...Przepraszam. Taki mam charakter, że jak najmniej próbuję komuś na głowę wchodzić z moimi problemami. Ale dzięki Tobie udało się i z całego serca dziękuję :) Zacząłem studiować te useState'y i w końcu rozjaśnił mi się Twój przykład. Wrzucę jak u mnie to wygląda dokładnie teraz: 

const Form = () => {
    const [numberOfQuestion, setNumberOfQuestion] = useState(0);
    const onClick = () => setNumberOfQuestion(numberOfQuestion + 1);
    return (
	<div>
       <Button color="link" onClick={onClick} >Dodaj pytanie({numberOfQuestion})</Button>
       {Array(numberOfQuestion).fill("").map((_, id) => <Formularz key={id}/>)}
    </div>)
}