Как по клику на кнопку рендерить другой компонент несколько раз?

Question

[Sanchik97]

Добрый день! Допустим, есть кнопка, которая при клике будет добавлять компонент Input на страницу! Если написать вот так:

import React from 'react'
import { Input } from 'InputComponent'

export default class Parent extends React.Component {
	state = {
		InputCallState: false
	}

	inputStateHandler = () => {
		this.setState({
			inputCallState: true
		})
	}
	render() {
		return (
			<div>
				<button onClick={this.inputStateHandler}>Добавить компонент</button>
				{this.state.inputCallState ? <Input /> : null}
			</div>
		)
	}
}

То компонент вызовется один раз. А как сделать, чтобы при каждом клике на кнопку добавлялся новый Input компонент?

Answer 1

[Дмитрий]

В состоянии хранить массив сущностей, при рендеринге рендерить инпуты в цикле, при нажатии на кнопку добавлять данные в массив.

Answer 2

[0xD34F]

class Parent extends React.Component {
  state = {
    count: 0,
  }

  onClick = () => {
    this.setState(({ count }) => ({
      count: count + 1,
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.onClick}>Добавить компонент</button>
        {Array.from({ length: this.state.count }, () => <Input />)}
      </div>
    );
  }
}