Как удачнее реализовать редактирование карточек?

Question

[Destell]

В моем приложении есть карточки вида "имя - фамилия - телефон - адрес", данные в них можно редактировать.

Сейчас редактирование сделано так:

<StyledMain>
                <ElemInput
                    templateEdit={rest.action}
                    value={name}
                    cath={"name"}
                />
                <ElemInput
                    templateEdit={rest.action}
                    value={surname}
                    cath={"surname"}
                />
                <ElemInput
                    templateEdit={rest.action}
                    value={phone}
                    cath={"phone"}
                />
                <ElemInput
                    templateEdit={rest.action}
                    value={address}
                    cath={"address"}
                />
            </StyledMain>

class ElemInput extends React.Component {
    returnValue = e => {
        this.props.templateEdit(e, this.props.cath);
    };

    render() {
        return (
            <StyledInput
                onChange={this.returnValue}
                defaultValue={this.props.value}
            />
        );
    }
}

Данные сохраняются в объект-шаблон под ключами, соответствующими cath={""}. Так же в шаблоне есть id, задаваемое без участия пользователя.
Однако, мне кажется, это какой-то костыльный метод. Есть ли более адекватные способы редактирования данных?

Answer 1

[Антон Спирин]

ElemInput - бесполезная обертка с понятным только вам интерфейсом, усложняющая код.
Старайтесь так никогда не писать. Если описываете интерфейс, используйте традиционные имена свойств для компонентов(name, onChange etc).
Посмотрите хороший пример по работе с формами из официальной документации.