Отобразить компонент реакции n раз - PullRequest
Новая
       3

Отобразить компонент реакции n раз

1 голос
/ 13 января 2020

У меня есть следующий код: 

import React, { Component } from 'react';
import {Button} from "@material-ui/core";
import Selector from "./Selector"

class Trigger extends Component {

  constructor(props) {
    super(props);
    this.state = {
      clicks: 0
    };
  }

  IncrementItem = () => {
    this.setState({
      clicks: this.state.clicks + 1
    });
  }

  DecreaseItem = () => {
    this.setState({
      clicks: this.state.clicks - 1
    });
  }

  render() {
    console.log(this.state)
    return (
      <div>

        <Button
        onClick={this.IncrementItem}
        variant="contained"
        color='primary'>
        add
        </Button>

        {this.state.clicks ?
          <Button
          onClick={this.DecreaseItem}
          variant="contained"
          color='primary'>
          remove
          </Button>:
          null}

        {this.state.clicks ?
          <Selector>
          </Selector>:
          null}

      </div>
    );
  }
}

export default Trigger;

Идея: 

1. The first button increases this.state.clicks
2. The second button is shown only if this.state.clicks > 0
3. The second button decreases this.state.clicks

Проблема: визуализировать компонент выбора n раз (а не только один раз, как в моем коде) где n = this.state.clicks.

Примечание. Компонент селектора состоит из 2 селекторов и нескольких опций, поэтому он не является массивом строк. Большое спасибо!

1 Ответ

1 голос
/ 13 января 2020

Попробуйте это: 

{
    [...Array(this.state.clicks)].map((v, i) => <Selector key={`selector-${i}`} /> )
}
...