How to render another component multiple times on button click?

Question

React

Good afternoon! Let's say there is a button that, when clicked, will add an Input component to the page! If you write like this:

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>
    )
  }
}

The component will be called once. How can I add a new Input component every time the button is clicked?

Answer 1

Able to store an array of entities, render inputs in a loop during rendering, add data to the array when a button is pressed.