I'd like to insert dynamically several React ponent in a div HTML element. Every time that I click on button, I would like to add a new PeriodButtonContainer inside div with id="container".

This is what I've tried so far:

class Period extends React.Component {
  addPeriodHandler = () => {
    /****?????******/
  };

  render() {
    return (
      <div>
        <div id="container">
          <PeriodButtonContainer />
        </div>
        <div>
          <button id="addPeriod" onClick={this.addPeriodHandler}>
            Add a period
          </button>
        </div>
      </div>
    );
  }
}

Thanks in advance

I'd like to insert dynamically several React ponent in a div HTML element. Every time that I click on button, I would like to add a new PeriodButtonContainer inside div with id="container".

This is what I've tried so far:

class Period extends React.Component {
  addPeriodHandler = () => {
    /****?????******/
  };

  render() {
    return (
      <div>
        <div id="container">
          <PeriodButtonContainer />
        </div>
        <div>
          <button id="addPeriod" onClick={this.addPeriodHandler}>
            Add a period
          </button>
        </div>
      </div>
    );
  }
}

Thanks in advance

• javascript
• html
• reactjs

• you should increment a counter in your state, create an array of the length of the counter and map it to your element – Axnyff Commented Jul 11, 2018 at 21:22

1 Answer 1

You could keep a counter that you increment on each button click, and create that many PeriodButtonContainer ponents in your render method with e.g. Array.from.

Example

class Period extends React.Component {
  state = { periods: 1 };

  addPeriodHandler = () => {
    this.setState(previousState => {
      return { periods: previousState.periods + 1 };
    });
  };

  render() {
    return (
      <div>
        <div id="container">
          {Array.from({ length: this.state.periods }, (_, index) => (
            <PeriodButtonContainer key={index} />
          ))}
        </div>
        <div>
          <button id="addPeriod" onClick={this.addPeriodHandler}>
            Add a period
          </button>
        </div>
      </div>
    );
  }
}