How to pass props from autocorrect to parent class

Question

I've previously asked a question regarding the passing of state for react through props here: Laggy TextField Updates in React.

I've decided to refactor my code using ChrisG's method, where I store states in the parent FormSection, and pass props into the child CompanyField.

Parent:

class FormSection extends React.Component {

  state = { 
    company: '', 
    jobType: ''
  };

  createHandleChange(name) {
    return (e) => {
      try {
      this.setState({ [name]: e.target.value.toLowerCase() }); //convert to lowercase if text data
      } catch {
        this.setState({ [name]: e.target.value }); 
      }
      console.log(name,  e.target.value);
    };
  }

  render() {
    return (
        <FormContainer>
            <CompanyField  # Working Correctly
                value={this.state.company}
                handleChange={this.createHandleChange("company")}
            />

            <JobTypeField  # Does not work
                value={this.state.jobType}
                handleChange={this.createHandleChange("jobType")}
            />
        </FormContainer>
   )
}

TextFieldStyled is just MUI's textfield that was styled using styled components.

Child:

    class CompanyField extends React.Component {
    
      render() {
        return (
          <TextFieldStyled
            id = "outlined-basic" 
            label = "Company" 
            variant = "outlined"
            fullWidth
    
            value={this.props.value}
            onChange={this.props.handleChange}
          />
        );
      }
    }

This managed to successfully update the parent components state. However, when doing the same thing to MUI's autocomplete:

class  JobTypeField extends React.Component {
    
    render() {
        return (
            <DropDownStyled>
                <Autocomplete
                    disablePortal
                    id="combo-box-demo"
                    options={jobType}

                    value={this.props.value}
                    onChange={this.props.handleChange}
                    renderInput={(params) => <TextField {...params} label="Job Type" />}
                />
            </DropDownStyled>
        );
    }
}

const jobType = [
  { label: 'Full-Time' },
  { label: 'Part-Time' },
  { label: 'Internship' },
  { label: 'Contract' },
  { label: 'Freelance' },
];

This error occurs: The value provided to Autocomplete is invalid. None of the options match with 0. You can use the isOptionEqualToValue prop to customize the equality test.

After clicking an option, it defaults to 0.

Additionally, the state is not updated.

Thanks!

Resolved: I've realised that unlike the textfield that returns one event prop whereby I have to do e.target.value, the MUI textfield returns two props namely event. As such, I have to create a second change handler that accepts 2 props event and value, but only using the value prop instead.

  createHandleChange2(name) {
    return (event, value) => {
      try {
        this.setState({ [name]: value.label.toLowerCase() }); 
        console.log(name,  value.label);  
      } catch {
        this.setState({ [name]: '' }); 
        console.log(name,  '');
      }
    };

Does anyone know of a way to combine common handling events whereby they have different input (namely text field that has 1, vs autocorrect that has 2)? Or do I have to do some kind of overloading method?

Answer 1

"e" is undefined in your createHandleChange method. Try to get a reference to it by updating your code as below.

    ...
    createHandleChange(e, name) {
      return (e) => {
        try {
          this.setState({ [name]: e.target.value.toLowerCase() }); //convert to lowercase if text data
        } catch {
          this.setState({ [name]: e.target.value }); 
        }
        console.log(name,  e.target.value);
      };
    }
    ...

    <CompanyField  // Working Correctly
        value={this.state.company}
        handleChange={(e) => this.createHandleChange(e, "company")}
    />