After getting member data, member state will be like this.
{
_id: '61d34027ca50827501279eb0',
index: 1,
email: 'bcr90348@zwoho.com',
name: '1',
active: true
}
How to change the values of the above object by changing the text box values?
Ex: Changing the name. Changing email.
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 Edit
Assuming that member already has a value (like you described in your question), you can alter one or multiple properties of it by doing something like this with the spread operator:
setMember(member => ({...member, name: "My New Name", email: "NewEmail"}))
See the Hooks API and useState documentation for more information.
You can define an onChangeHandler like below. And add define name prop to each field.
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}
/>