@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 компонент?
  • Вопрос задан
  • 67 просмотров
Решения вопроса 2
@dimoff66
Кратко о себе: Я есть
В состоянии хранить массив сущностей, при рендеринге рендерить инпуты в цикле, при нажатии на кнопку добавлять данные в массив.
Ответ написан
0xD34F
@0xD34F
class Parent extends React.Component {
  state = {
    count: 0,
  }

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

  render() {
    return (
      <div>
        <button onClick={this.inputStateHandler}>Добавить компонент</button>
        {[...Array(this.state.count)].map(() => <Input />)}
      </div>
    );
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Indacoin Москва
от 80 000 до 160 000 руб.
Acme Crypto Corp Нижний Новгород
от 120 000 до 200 000 руб.