Как создать и сохранить значения нескольких входов в динамической форме c?

Question

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

Мой код

const [supply_detail_data,setSupply_detail_data]=React.useState({
    suppCashDetail:[{text : [],val:[]}]
});

const addNewSuppDetailInput = () => {
    setSupply_detail_data(
        {suppCashDetail: [...supply_detail_data.suppCashDetail,{text : [],val:[]}]}
    )
}

function supply_detail_handler(event){
    // should store the values of inputs in the State
}

JSX

<div className='addNewInput' onClick={addNewSuppDetailInput}>+</div>
 {
    supply_detail_data.suppCashDetail.map((el,index) => {
    let textID='suppDetailText'+index;
    let valID='suppDetailVal'+index;
        return (
        <div key={index}>
        •<input type='text' 
            name={textID}
            value={el.text||''} 
            onChange={supply_detail_handler.bind(index)}
        />

        <input type='number'
            name={valID} 
            value={el||''} 
            onChange={supply_detail_handler.bind(index)}/> 
        </div>
        );

    }) 
 }

Каждый раз, когда пользователь нажимает на + два сгенерированных входа, один типа text другой типа number, мне нужно знать, как supply_detail_handler, который выполняется при изменении значения, чтобы сохранить значение нового сгенерированного inputs

Answer 1

Вам нужно назначить каждому входу уникальный идентификатор, который позже вы сможете использовать в своем магазине. Проверьте этот пример: https://codesandbox.io/s/muddy-firefly-xz31w