On a button Onclick i want whole component to be render?

Question

I am trying to add itinerary, I need exact copy of the form after clicking 'Add another Day' button and replicate this check button should copy the exact same value from above form.

I have used ant Design form component and with the help of dynamicForm component. and i want same output as in the second image below. Upto the first image i had completed. now same form need to be triggered when i click Add another button.

add = () => {
    const { form } = this.props;
    const keys = form.getFieldValue('keys');

    // eslint-disable-next-line react/no-access-state-in-setstate
    this.setState({ id: this.state.id + 1 });
    const nextKeys = keys.concat(this.state.id);

    form.setFieldsValue({
      keys: nextKeys
    });
  };

  render() {
    const { getFieldDecorator, getFieldValue } = this.props.form;

    getFieldDecorator('keys', { initialValue: [] });
    const keys = getFieldValue('keys');
    const formItems = keys.map(k => (
      <Form.Item required={false} key={k}>
        {getFieldDecorator(`names[${k}]`, {
          rules: [
            {
              type: 'array',
              required: true,
              message: 'Please select date!'
            }
          ]
        })(<RangePicker className={styles.calendar} format="YYYY-MM-DD" placeholder={['Start date', 'End date']} />)}
        {keys.length >= 1 ? (
          <Icon className={styles.dynamic_delete_btn} type="minus-circle-o" onClick={() => this.remove(k)} />
        ) : null}
      </Form.Item>
    ));

 <Button onClick={this.addNewPckHighlightsTxtArea} className={styles.btn_add_another_day}>
                <FormattedMessage id="app.package.add.day" />
              </Button>

Answer 1

如果要再次复制相同的内容，只需使用React.createElement（'指定的组件或元素'），然后将此元素附加到数组中即可。