Я хочу добавить этот компонент карты динамически при нажатии кнопки. Поэтому, если я нажму кнопку 3 раза, в DOM нужно добавить 3 карты

Question

Я хочу добавить этот компонент карты динамически при нажатии кнопки. Поэтому, если я нажму кнопку 3 раза, в DOM нужно добавить 3 карты. Может кто-нибудь помочь мне, почему это не работает, я новичок, чтобы реагировать. заранее спасибо. Это потому, что я не могу использовать компонент вне метода рендеринга

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

class App extends Component {

  addRobotHandler = () => {
    return (
      <Card/>
    )
  }
  render() {
    return (
      <div>
        <button onClick={this.addRobotHandler}>Click me to see Robots</button>
      </div>
    );
  }
}

export default App;

Answer 1

Вы можете добавить состояние, которое определило количество отсчетов, и отобразить это количество карт в вашей функции визуализации.

// sample example
class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cardsCount: 0
    };
  }

  addRobotHandler = () => {
    this.setState(prevState => {
      return { cardsCount: prevState.cardsCount + 1 };
    });
  };

  getCards = ()  => {
    let cards = [];
    for(let i = 0; i < this.state.cardsCount; i++) {
      cards.push(<Cards/>)
    }
    return cards;
  }

  render() {
    return (
      <div>
        <button onClick={this.addRobotHandler}>Click me to see Robots</button>
        {this.getCards()}
      </div>
    );
  }
}