onChange in React

Question

I am unable to update the status of my customerContact with handleChange. Indeed, I use the updateContact function to retrieve the customer's id to be able to modify their contact. However, when I get the id I feel like I am blocking the status update. So I can't edit a field in contact.

Can somebody help me, please?

class DetailsCustomer extends React.Component{

    constructor (props) {
   
        super(props)
        this.handleChange = this.handleChange.bind(this);
        this.toggle = this.toggle.bind(this);
        this.toggle1 = this.toggle1.bind(this);
        this.state = {
            id: props.match.params,
            customers: [],
            customerContact: {},
            customerContacts: [],
            customerAddresses: [],
            genders: [],
            contactTypes: [],
            addressTypes: [],
        };
    }

  updateContact = (id, index) => {
        this.setState({
            customerContact: this.state.customerContacts[index],
        }, () => {
            console.log("update-contact: ", this.state.customerContact);
   })

  handleChange = async ({currentTarget}) => {
         const {name, value} = currentTarget;
         this.setState({...this.customerContact, [name]: value});
     }
  
render() {
const { id, customerContacts, customerContact, genders, name } = this.state;
   return(
         <div className="form-group col-md-12">
           <Field name="lastName" label="Nom" placeholder="Nom" value= 
            {this.state.customerContact.lastName} onChange={this.handleChange.bind(this)} />
         </div>
)}

Field.jsx

import React from 'react';

const Field = ({name, label, value, onChange, placeholder = "", type = "text", error = "" }) => (
    <div className="form-group">
        <label htmlFor={name}>{label}</label>
        <input
            value={value}
            onChange={onChange}
            type={type}
            placeholder={placeholder || label}
            name={name}
            id={name}
            className={"form-control" + (error && " is-invalid")}
        />
        {error && <p className="invalid-feedback">{error}</p> }
    </div>
);

export default Field;

Answer 1

I found some syntax issue in your code like curly bracket missing of updateContact and your component DetailsCustomer

Secondly, there are two bind functions in your constructor this.toggle and this.toggle1 which are not declared in your code, they are sending exceptions.

The last issue is in your handleChange function was assigning new value to customerContact

I made all correct in below code.

class DetailsCustomer extends React.Component{
    constructor (props) {
   
        super(props)
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            id: props.match.params,
            customers: [],
            customerContact: {},
            customerContacts: [],
            customerAddresses: [],
            genders: [],
            contactTypes: [],
            addressTypes: [],
        };
    }

  updateContact = (id, index) => {
    this.setState({
        customerContact: this.state.customerContacts[index],
    }, () => {
        console.log("update-contact: ", this.state.customerContact);
    })
  }

  handleChange = ({currentTarget}) => {
    const {name, value} = currentTarget;
    this.setState({customerContact: {...this.state.customerContact, [name]: value}}, () => console.log(this.state.customerContact));
  }
  
  render() {
    const { id, customerContacts, customerContact, genders, name } = this.state;
      return(
            <div className="form-group col-md-12">
              <Field name="lastName" label="Nom" placeholder="Nom" value= 
                {this.state.customerContact.lastName} onChange={this.handleChange.bind(this)} />
            </div>
  )}
}

Answer 2

you say that handleChange need to get a object but you dont give it when you call handleChange. i think this may help. if you use arrow function => you dont need to use this.bind on functions

class DetailsCustomer extends React.Component{

    constructor (props) {
   
        super(props)       
        this.toggle = this.toggle.bind(this);
        this.toggle1 = this.toggle1.bind(this);
        this.state = {
            id: props.match.params,
            customers: [],
            customerContact: {},
            customerContacts: [],
            customerAddresses: [],
            genders: [],
            contactTypes: [],
            addressTypes: [],
        };
    }

  updateContact = (id, index) => {
        this.setState({
            customerContact: this.state.customerContacts[index],
        }, () => {
            console.log("update-contact: ", this.state.customerContact);
   })

  handleChange = async (e) => {         
         this.setState({customerContact: e.target.value});
     }
  
render() {
const { id, customerContacts, customerContact, genders, name } = this.state;
   return(
         <div className="form-group col-md-12">
           <Field name="lastName" label="Nom" placeholder="Nom" value= 
            {this.state.customerContact} onChange={(e)=>this.handleChange(e)} />
         </div>
)}