@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 компонент?
  • Вопрос задан
  • 58 просмотров
Решения вопроса 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>
    );
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Ultimate Guitar Калининград
от 1 000 до 5 000 usd.
Spar-online Нижний Новгород
от 150 000 до 170 000 руб.
Enapter Санкт-Петербург
от 160 001 руб.
20 янв. 2019, в 13:50
15000 руб./за проект
20 янв. 2019, в 09:57
10000 руб./за проект
20 янв. 2019, в 07:18
15000 руб./за проект