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].
The code in a nutshell is:
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'). [My uneducated guess is that maybe somehow the thing rerenders and props are empty…]
What is the correct way of using onChange?