Strapi onChange signature

Question

I am implementing some minor adjustments to a Strapi CMS, customized by my colleagues.

I need to extend the existing plugins with custom UI [done] and to be able to persist the configuration changes. Found the database config and lifecycle methods. Those functions from my model are never invoked.

I was told that the signature for the onChange method, which my component is receiving in props is onChange({value: newValue}) and it is [excuse my English] the new value for the variable named value from the component properties [props].

const Category = (props) => {
  const { name, visible, value, onChange } = props;
  ...

  return (
    <div className="container" style={{ margin: '2rem auto', paddingLeft: 0 }}>
      <table className="col-12">
        {allSubCategories &&
          Object.keys(allSubCategories).map((key) => (
            <SubCategoryList
              key={`sblist ${key}`}
              title={key}
              visible={visible}
              data={allSubCategories[key]}
              remainingData={data}
              availableAttributes={value}
              onChange={(value) => {
                console.log('value:', value);
                console.log('before onchange');
                onChange({value});
                console.log('finished onchange');
              }}
            />
          )
        )}
      </table>
    </div>
  );
}

This signature that I am using is not working for me. The call to onChange() crashes with an error: Uncaught TypeError: Cannot read properties of undefined (reading 'name').

What is the correct way of using onChange?

Answer 1

Discovered the correct signature

onChange({
  target: {
    name,
    value,
  },
});

Now, it is working.