Как получить данные из динамически создаваемых input?

Question

batonpeton @batonpeton

Как получить данные из динамически создаваемых input?

У меня есть компонент фотокарточки , с сервера приходят фото и номер изображения.
в таком формате

[{number: 3, photo: 'http://127.0.0.1/media/photo/mDdYZD0X1jM.jpg'},
      {number: 1, photo: 'http://127.0.0.1/media/photo/dC_z3tfsKjM.jpg'},
      {number: 5, photo: 'http://127.0.0.1/media/photo/t5Yl1EfyFTM.jpg'},
      {number: 4, photo: 'http://127.0.0.1/media/photo/R68dnExfmHA.jpg'},
      {number: 6, photo: 'http://127.0.0.1/media/photo/thtWvQLxung.jpg'},
      {number: 2, photo: 'http://127.0.0.1/media/photo/DU1r0HB2i-E.jpg'}]

соответственно я их отрисовываю в компоненте

{photos.photos?.map((photo, i) => {
                return (
                  <PhotoCard
                    number={photo.number}
                    key={i}
                    blurRef={blurRef}
                    setIsBlur={setIsBlur}
                    photo={photo.photo}
                    onChangeHandler={onChangeHandler}
                    inputValue={inputValue}
                    getChangeData={getChangeData}
                  />
                )
              })}

у пользователя есть возможность выбрать формат фото которое он может получить, для этого в у меня есть
счетчики в каждой карточке 6 счетчиков

<div className={styles.photoCountersCardsWrapper}>
                <Counter
                    getChangeData={getChangeData}
                    name={'10x15'}
                    id={'10x15'}
                    inputValue={inputValue["10x15"]}
                    onChangeHandler={onChangeHandler}
                />
                <Counter
                    getChangeData={getChangeData}
                    name={'15x20'}
                    id={'15x20'}
                    inputValue={inputValue["15x20"]}
                    onChangeHandler={onChangeHandler}
                />
                <Counter
                    getChangeData={getChangeData}
                    name={'20x30'}
                    id={'20x30'}
                    inputValue={inputValue["20x30"]}
                    onChangeHandler={onChangeHandler}
                />
                <Counter
                    getChangeData={getChangeData}
                    name={'magnet'}
                    id={'Магнит'}
                    inputValue={inputValue.magnet}
                    onChangeHandler={onChangeHandler}
                />
                <Counter
                    getChangeData={getChangeData}
                    name={'calendar'}
                    id={'Календарь'}
                    inputValue={inputValue.calendar}
                    onChangeHandler={onChangeHandler}
                />
                <Counter
                    getChangeData={getChangeData}
                    name={'photo_book'}
                    id={'Фотокнига'}
                    inputValue={inputValue.photo_book}
                    onChangeHandler={onChangeHandler}
                />
            </div>

счетчик внутри выглядит вот так

<div className={styles.counterBlock}>
            <div className={styles.counterName}>{id}</div>
            <div onMouseEnter={()=>setShowBtn(true)} onMouseLeave={()=>setShowBtn(false)} className={styles.counterButtonWrap}>
                <button className={showBtn?styles.counterButtonDecShow:styles.counterButtonDec} type="button" onClick={decrement} disabled={count === 0}>-</button>
                <input className={styles.counterInput} ref={inputRef} type="text" name={name} value={count} disabled />
                <button className={showBtn?styles.counterButtonShow:styles.counterButton} type="button" onClick={increment}>+</button>
            </div>
        </div>

вот так выглядит onChangeHandler

const onChangeHandler = (name, count) => {
    const newInput = (data) => ({ ...data, [name]: count });
    setInputValue(newInput);
  };

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

[{
    "number":1,
    "10x15": 0,
    "15x20": 0,
    "20x30": 0,
    "magnet": 0,
    "calendar": 0,
    "photo_book": 0
},
    "number": 2,
    "10x15": 0,
    "15x20": 0,
    "20x30": 0,
    "magnet": 0,
    "calendar": 0,
    "photo_book": 0
}]