Insert dynamically a React component in a div

Question

I'd like to insert dynamically several React component 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

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

Tholle · Accepted Answer · 2018-07-11 23:05:09Z

6

You could keep a counter that you increment on each button click, and create that many PeriodButtonContainer components 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>
    );
  }
}

edited Jul 11, 2018 at 23:05

answered Jul 11, 2018 at 21:27

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Insert dynamically a React component in a div

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related