@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 компонент?
  • Вопрос задан
  • 8361 просмотр
Решения вопроса 2
@dimoff66
Кратко о себе: Я есть
В состоянии хранить массив сущностей, при рендеринге рендерить инпуты в цикле, при нажатии на кнопку добавлять данные в массив.
Ответ написан
Комментировать
0xD34F
@0xD34F Куратор тега React
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>
    );
  }
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы