title: How to change a useState's object value in react?
body: <p>After getting member data, <code>member</code> state will be like this.</p>
  <pre><code>{
    _id: '61d34027ca50827501279eb0',
    index: 1,
    email: 'bcr90348@zwoho.com',
    name: '1',
    active: true
  }
  
  </code></pre>
  <p>How to change the values of the above object by changing the text box values?</p>
  <p>Ex: Changing the name. Changing email.</p>
  <pre><code>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) =&gt; {
    const id = props.match.params.id
    const [member, setMember] = useState({})
  
    const handleLoadMember = async () =&gt; {
      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(() =&gt; {
      handleLoadMember()
    }, [])
  
    return (
      &lt;CRow&gt;
        &lt;CCol xs={12}&gt;
          &lt;CCard className=&quot;mb-4 w-75&quot;&gt;
            &lt;CCardHeader&gt;
              &lt;strong&gt;Add New Member&lt;/strong&gt;
            &lt;/CCardHeader&gt;
            &lt;CCardBody&gt;
              &lt;p className=&quot;text-medium-emphasis small&quot;&gt;
                Click on save button after editing member details.
              &lt;/p&gt;
              &lt;CForm&gt;
                &lt;div className=&quot;d-inline-flex w-100&quot;&gt;
                  &lt;div className=&quot;mb-3 me-1 w-50&quot;&gt;
                    &lt;CFormLabel&gt;Email:&lt;/CFormLabel&gt;
                    &lt;CFormInput
                      type=&quot;email&quot;
                      placeholder=&quot;name@example.com&quot;
                      value={member.email}
                      onChange={(e) =&gt; console.log(e.target.value)}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;mb-3 w-50&quot;&gt;
                    &lt;CFormLabel&gt;Name:&lt;/CFormLabel&gt;
                    &lt;CFormInput type=&quot;text&quot; placeholder=&quot;Perera's Home&quot; value={member.name} /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className=&quot;mb-3&quot;&gt;
                  &lt;CButton color=&quot;primary&quot;&gt;Submit&lt;/CButton&gt;
                &lt;/div&gt;
              &lt;/CForm&gt;
            &lt;/CCardBody&gt;
          &lt;/CCard&gt;
        &lt;/CCol&gt;
      &lt;/CRow&gt;
    )
  }
  
  Edit.propTypes = {
    match: PropTypes.any,
  }
  
  export default Edit
  </code></pre>