Рендеринг компонента несколько раз в зависимости от события

Question

Итак, я работаю над реактивным проектом, и есть карта, которую нужно заполнять снова и снова, в зависимости от варианта использования.Иногда карта будет заполнена только один раз, а иногда одна и та же карта должна быть заполнена несколько раз, как я могу заставить компонент карты загружаться несколько раз, в зависимости от варианта использования.Как только кто-то начинает набирать текст на первой карточке, я хочу, чтобы новый компонент карточки загружался одновременно под уже доступным компонентом карточки.

Я уже создал компонент карточки с полями ввода вкомпонент, названный его IndividualVendor, и только один компонент загружается при начальной загрузке.Кроме того, такая карта может быть добавлена ​​для добавления большего числа поставщиков.

Вот код для основного компонента Бенефициара и контейнера карты, называемого IndividualVendor.

import React, { Component } from 'react';
import BeneficiaryFilter from '../../Commons/Filter/Beneficiary/BeneficiaryFilter';
import AddBeneficiary from './AddBeneficiary/AddBeneficiary';

class Beneficiary extends Component {
   render() {
      return (
         <div className="beneficiary-container">
            <BeneficiaryFilter />
            <div className="main-container">
               <AddBeneficiary />
            </div>
         </div>
      );
   }
}

 export default Beneficiary;


import React, { Component } from 'react';
import IndividualVendor from '../IndividualVendor/InvidualVendor';

class AddBeneficiary extends Component {
   constructor(props) {
      super(props);
      this.state = {

      };
   }


   render() {
      return (
         <div className="add-beneficiary-container">
            <IndividualVendor />
         </div>
      );
   }
}

export default AddBeneficiary;

Таким образом, в основном первый компонент с именем Бенефициар, будетиметь либо один компонент AddBeneficiary, либо многие из них загружены.Мне нужно знать, как лучше всего это сделать?Надеюсь, что вопрос дает вам некоторый контекст.Буду очень признателен за любую помощь, я очень новичок в программировании и пытаюсь учиться как можно больше каждый день.Прошу проигнорировать, если я упомянул или спросил что-то слишком примитивное !!

Answer 1

Насколько я понимаю, вы хотели бы иметь возможность добавлять карту каждый раз, когда у вас есть событие щелчка на предыдущей карте.Затем вы можете создать функцию щелчка в родительском элементе, передать ее через реквизиты карточкам и позволить им вызывать ее при щелчке.Это может привести к добавлению другой карты.

class Beneficiary extends Component {
   this.state = {
      children: 1
   }

   handleClick() {
      this.setState({children: this.state.children + 1});
   }

   render() {
      const { children } = this.state;
      let cards = [];
      for (let i = 0; i < children; i++) {
         cards.push(
            <AddBeneficiary key={i} handleClick={this.handleClick} />
         );
      }

      return (
         <div className="beneficiary-container">
            <BeneficiaryFilter />
            <div className="main-container">
               { cards }
            </div>
         </div>
      );
   }
}

export default Beneficiary;


class AddBeneficiary extends Component {
   render() {
      const { handleClick } = this.props;
      return (
         <div 
            className="add-beneficiary-container"
            onClick={handleClick}
         >
            <IndividualVendor />
         </div>
      );
   }
}

export default AddBeneficiary;