вывод input в react в цикле

Господа, прошу совет ( сильно упростил код, что бы не погружать во все нюансы )

Есть компонент, рисует форму, работает как надо. Особенность - вывод input в цикле, т.к. из очень много. Вот оч не охота для каждого поля прописывать отдельно IF + const. Если взять код ниже - получается, что при вводе в input, значение попадает в нужную переменную, и отображается на экране

Можно ли как то добавить в данную конструкцию возможность что бы при загрузке страницы, брались параметры из GET и при этом при изменении в INPUT можно было менять значение без смены курсора и доп. перезагрузок? ( вывод полей в цикле хочу сохранить )

// компонент
function Cabinet(props) {
    
    // устанавливаем значение в объект, так, что бы не было перезагрузки страницы, и что бы после этого курсор оставался в поле где вводили что либо (  )
    function setFuncFormValues(name, value){
        let tempForm = formValues
            tempForm[name] = value
            setFormValues(tempForm)
            //console.log(tempForm) - все как надо
    }

    // получаю это из вне, и полей реально много
    let fields = [
        {name: "id"},
        {name: "name"},
        .. 
        {name: "email"},
    ]

    // если заранее записать в объект значения, то onChange не работает
    const [formValues, setFormValues] = useState({})

    // вывод полей в цикле
    const FormFilters = () => {
        fields.map((item, key) => {
            return <input
                key={key}
                value={formValues[item.name]}
                onChange={e => setFuncFormValues(item.name, e.target.value)}
            />
        })
    }

    return <div><FormFilters /></div>
}

Ответы (0 шт):