Después de obtener los datos de los member será así.
{ _id: '61d34027ca50827501279eb0', index: 1, email: 'bcr90348@zwoho.com', name: '1', active: true }¿Cómo cambiar los valores del objeto anterior cambiando los valores del cuadro de texto?
Ej: Cambiar el nombre. Cambio de correo electrónico.
import React, { useEffect, useState } from 'react' import { CButton, CCard, CCardBody, CCardHeader, CCol, CForm, CFormInput, CFormLabel, CRow, } from '@coreui/react' import PropTypes from 'prop-types' const Edit = (props) => { const id = props.match.params.id const [member, setMember] = useState({}) const handleLoadMember = async () => { try { const _data = await fetch(`http://localhost:4000/api/v1/member/${id}`, { method: 'GET', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + localStorage.getItem('token'), }, }) if (_data.status === 200) { const data = await _data.json() setMember(data.member) } else if (_data.status === 404) { } else { throw new Error() } } catch (err) { console.error(err) } } useEffect(() => { handleLoadMember() }, []) return ( <CRow> <CCol xs={12}> <CCard className="mb-4 w-75"> <CCardHeader> <strong>Add New Member</strong> </CCardHeader> <CCardBody> <p className="text-medium-emphasis small"> Click on save button after editing member details. </p> <CForm> <div className="d-inline-flex w-100"> <div className="mb-3 me-1 w-50"> <CFormLabel>Email:</CFormLabel> <CFormInput type="email" placeholder="name@example.com" value={member.email} onChange={(e) => console.log(e.target.value)} /> </div> <div className="mb-3 w-50"> <CFormLabel>Name:</CFormLabel> <CFormInput type="text" placeholder="Perera's Home" value={member.name} /> </div> </div> <div className="mb-3"> <CButton color="primary">Submit</CButton> </div> </CForm> </CCardBody> </CCard> </CCol> </CRow> ) } Edit.propTypes = { match: PropTypes.any, } export default EditSuponiendo que el member ya tiene un valor (como describió en su pregunta), puede modificar una o varias propiedades haciendo algo como esto con el operador de propagación:
setMember(member => ({...member, name: "My New Name", email: "NewEmail"}))Consulte la documentación de Hooks API y useState para obtener más información.
Puede definir un onChangeHandler como se muestra a continuación. Y agregue definir name prop a cada campo.
const onChangeHandler = (e) => { const { name, value } = e.target; setMember((prevState) => ({ ...prevState, [name]: value })); }; <CFormInput type="email" placeholder="name@example.com" name="email" onChange={onChangeHandler} value={member.email} /> <CFormInput type="text" placeholder="Perera's Home" name="name" onChange={onChangeHandler} value={member.name} />