Динамические формы в Netlify

Question

У меня есть два компонента в React, которые в некотором смысле являются обеими формами. Один компонент является родительской формой некоторых видов, которая содержит функцию сопоставления, которая выполняет итерацию по элемент состояния для создания ряда дочерних подформ. Это означает, что люди, использующие формы, могут щелкнуть кнопку, чтобы добавить новый экземпляр компонента ChildSubForm под кнопку в родительской форме.

Моя текущая проблема заключается в том, что я не могу получить форму, чтобы забрать детей в формах Netlify. У меня есть и скрытый ввод, поэтому родительская форма распознается, однако, когда я отправляю форму, подбираются только входные данные в родительской форме, как я могу изменить свои настройки или код, чтобы позволить netlify обнаруживать значения динамических компонентов, чтобы они отправляются вместе с другими данными?

Как видите, я также попытался сохранить все данные формы в элементах состояния и отправить их, но я все еще не вижу значения. Это как-то связано с тем, что Netlify создает статический сайт и заранее определяет все значения формы?

BookNow.js (родительская форма)

      import React, { Component } from 'react'

import ChildSubForm from './ChildSubForm'

export default class BookNow extends Component {
    state = {
        name: "",
        email: "",
        otherInfo: "",
        children: []
    }

    constructor(props) {
        super(props)
        this.addChild = this.addChild.bind(this);
        this.decrementChild = this.decrementChild.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    addChild() {
        this.setState({
            children: [...this.state.children, { name: "", year: "Year 7" }]
        })
    }

    decrementChild(i) {
        this.setState({
            children: this.state.children.filter((item, j) => i !== j)
        })
    }

    handleChange(e) {
        if (["name", "year"].includes(e.target.className)) {
            let children = [...this.state.children]
            children[e.target.dataset.id][e.target.className] = e.target.value
            this.setState({ children }, () => console.log(this.state.children))
        } else {
            this.setState({ [e.target.name]: e.target.value })
        }
    }

    handleSubmit(e) {
        e.preventDefault()
    }


    render() {
        if(this.props.isChild) {
            return (
                <form name="Booking Form" method="POST" data-netlify="true">
                    <input type="hidden" name="form-name" value="Booking Form" />
                    <input type="text" name="name" placeholder="Your Name" />
                    <select name="year-group">
                        <option value="Year 7">Year 7</option>
                        <option value="Year 8">Year 8</option>
                        <option value="Year 9">Year 9</option>
                        <option value="Year 10">Year 10</option>
                        <option value="Year 11">Year 11</option>
                        <option value="Year 12">Year 12</option>
                        <option value="Year 13">Year 13</option>
                        <option value="GCSE Retake">GCSE Retake</option>
                    </select><br />
                    <input type="email" name="email" placeholder="Your Email Address" /><br />
                    <textarea name="otherInfo" placeholder="Any more information..." /><br />
                    <button type="submit">Book Now</button>
                </form>
            )
        } else {
            return (
                <form onChange={this.handleChange} onSubmit={this.handleSubmit} name="Booking Form" method="POST" data-netlify="true">
                    <input type="hidden" name="form-name" value="Booking Form" />
                    <input type="text" name="name" placeholder="Your Name" /><br />
                    <input type="email" name="email" placeholder="Your Email Address" /><br />
                    <button onClick={this.addChild} name="add">+ Add Child</button><br />
                    {
                        this.state.children.map((child, i) => <ChildSubForm key={i} childNum={i} value={this.state.children[i]} dec={() => this.decrementChild(i)} />)
                    }
                    <textarea name="otherInfo" placeholder="Any more information..." /><br />
                    <button type="submit">Book Now</button>
                </form>
            )
        }
    }
}

Чайлдсубформ.js

      import React, { Component } from 'react'

export default class ChildSubForm extends Component {
    render() {
        const values = {
            name: `child-name-${this.props.childNum}`,
            year: `child-${this.props.childNum}-year-group`
        }
        return (
            <div className="ChildSubForm">
                <input type="text" id={values.name} name={values.name} data-id={this.props.childNum} value={this.props.value.name} className="name" placeholder="Child's Name" required />
                <select name={values.year} id={values.year} data-id={this.props.childNum} id={values.year} value={this.props.value.year} className="year">
                    <option value="Year 7">Year 7</option>
                    <option value="Year 8">Year 8</option>
                    <option value="Year 9">Year 9</option>
                    <option value="Year 10">Year 10</option>
                    <option value="Year 11">Year 11</option>
                    <option value="Year 12">Year 12</option>
                    <option value="Year 13">Year 13</option>
                    <option value="GCSE Retake">GCSE Retake</option>
                </select>
                <button onClick={this.props.dec} name="remove">- Remove Child</button><br />
            </div>
        )
    }
}

ОБНОВИТЬ:

Итак, я немного почитал и нашел сообщение, в котором говорится, что нужно сделать то же самое, и директор службы поддержки Netlify сказал, что это пока невозможно, если вы заранее не определите все поля формы (для каждого из отображаемых компонентов). Кто-нибудь нашел обходной путь для этого?

Нетлайф пост