adminjs - resource custom component for edit does not update values

Question

I am having some trouble using customize component for one of my resources fields. For my servicesubcategory, I have a field call parent_service_id, which has a belongs to relationship with another model servicecategory. When I use my customize component for the field parent_service_id and I try to update the field to a different value it is not reading the new value. I am using react-select to update the new field. When using console.log(), I can check the component state is changed. I checked the payload upon submit but the parent_service_id remains the same. Other field using the default component works without issue. below is my servicesubcategory model

const ServiceSubCategory = db.sequelize.define("service_sub_categories", {
  name_en: {
    type: db.Sequelize.STRING,
    allowNull: false,
  },
  name_cn: {
    type: db.Sequelize.STRING,
    allowNull: false,
  },
  name_zh: {
    type: db.Sequelize.STRING,
    allowNull: false,
  },
  parent_service_id: {
    type: db.Sequelize.INTEGER,
    allowNull: false,
  },
  parent_service_new_id: {
    type: db.Sequelize.VIRTUAL,
    allowNull: true,
  },

});
const options = {
  properties: {
   
    parent_service_id: {
      components: {
        list: AdminJS.bundle('./../../components/admin/service_sub_categories/list_service_category_id_field.jsx'),
        show: AdminJS.bundle('./../../components/admin/service_sub_categories/show_service_category_id_field.jsx'),
        edit: AdminJS.bundle('./../../components/admin/service_sub_categories/edit_service_category_id_field.jsx')
      },
    },
  },
};
module.exports = {
  options,
  resource: ServiceSubCategory,
};

my custom edit component

import React, {Component} from 'react'
import Select from 'react-select'
import {FormGroup, FormMessage} from "@adminjs/design-system";
import { Label } from '@adminjs/design-system'
class SelectParentServiceID extends Component {


    state = {
        selectedOption: {
            value: this.props.record.populated.parent_service_id.params.id,
            label: this.props.record.populated.parent_service_id.params.name_en,
        },
        value: this.props.record.populated.parent_service_id.params.id,
        parent_service_id: this.props.record.populated.parent_service_id.params.id,
    };

    handleChange = (selectedOption) => {
        this.setState({ 
            selectedOption: selectedOption, 
            value: selectedOption.value, 
            parent_service_id: selectedOption.value
        }, () => {
                console.log(`Option selected:`, this.state.selectedOption)
                console.log(`Option selected:`, this.state.parent_service_id)
        });
    };


    componentDidMount() {
        this.fetchData()
    }

    fetchData = async () => {
        let data;
        try {
            const response = await fetch('/api/servicecategories/get/');
            // Use the `.json` method on the fetch response object
            data = await response.json();
            const options = data.map(d => ({
                "value" : d.id,
                "label" : d.name_en
            }))
            this.setState({selectOptions: options})
        } catch (error) {
            console.log('error', error);
        }
    }

    render() {
        return (
            <FormGroup error={''}>
                <Label htmlFor={'parent_service_id'} required={true}>Parent Service Category</Label>
                <Select options={this.state.selectOptions}
                        onChange={this.handleChange}
                        defaultValue={this.state.selectedOption}
                        required={true}
                        name={'parent_service_id'}
                        value={this.state.selectedOption}
                />
                <FormMessage>{''}</FormMessage>
            </FormGroup>
        )
    }
}

export default SelectParentServiceID

React select is showing correct select names and select values

console.log shows the component state has changed

Answer 1

The record is not being updated because you only set component's local state but you don't do anything to the record object itself which is what AdminJS uses to contain form data. You would have to do something like:

this.props.onChange(this.props.property.path, selectedOption.value)

in your handleChange method. However, we use Function Components everywhere in AdminJS and I'm not exactly sure if it will work for you with Class Components.