What is the best way to implement card editing?

Question

React

In my application there are cards of the form "first name - last name - phone number - address", the data in them can be edited.
Now editing is done like this:

<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}
            />
        );
    }
}

The data is stored in the template object under keys corresponding to cath={""}. Also in the template there is an id that is set without user intervention.
However, it seems to me that this is some kind of crutch method. Are there better ways to edit data?

Answer 1

ElemInput is a useless wrapper with an interface that only you can understand, complicating the code.
Try to never write like that. If you are describing an interface, use traditional component property names (name, onChange etc).
See the official documentation for a good example of how to work with forms.