Error in custom widget, doesn't read data from an other page

[viral salmon]

i am sending a data from a page let's call it page1, this data is an array (i tried json it didn't work either). and i want to display the categories that are inside that data in a custom widget but it doesn't work.
i told my self maybe the page isn't even recieving data so i tried recieving it with list widget and it worked so the data is been sent successfully but the custom widget is not working.
so either the custome widget doesn't accepts data that sent from other pages or i am writing a wrong syntax (i tried everything)
here is the code
import React from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
import ReactDOM from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';

function CategoryButtonsWidget() {
// Safe initialization (empty array if store.categories is missing)
const [categories, setCategories] = React.useState(
(appsmith.store && appsmith.model.categories) ? appsmith.model.categories : []
);
const [selected, setSelected] = React.useState(null);

React.useEffect(() => {
console.log("Categories from store:", appsmith.store?.categories);
if (appsmith.model && appsmith.model.categories) {
setCategories(appsmith.model.categories);
}
}, []);

const handleClick = React.useCallback((cat) => {
setSelected(cat.id);
appsmith.triggerEvent('onCategoryClick', cat);
}, []);

return (
<div className="category-buttons-widget">
{categories.length === 0 ? (
<p>No categories available</p>
) : (
categories.map((cat) => (
<button
key={cat.id}
className={'category-btn' + (selected === cat.id ? ' active' : '')}
onClick={() => handleClick(cat)}
>
{cat.label}
</button>
))
)}
</div>
);
}

appsmith.onReady(() => {
ReactDOM.render(<CategoryButtonsWidget />, document.getElementById("root"));
});

[hollow skiff]

Hello! I'm AppsmithBot, here to help you with your Appsmith queries.

It seems like you're trying to use a custom widget to display categories from a data array. Let's ensure that your custom widget is correctly set up to receive and display the data.

1. Ensure Data is Passed Correctly: Make sure that the data is being passed to the custom widget correctly. You mentioned that the data works with a List widget, so it should be available in the store or model.

2. Check Data Access: In your code, you're accessing appsmith.model.categories. Ensure that categories is correctly set in the model or store. You can verify this by logging the data:

console.log("Categories from model:", appsmith.model?.categories);

3. Correct Data Binding: Ensure that the data is bound correctly in the Appsmith platform. If you're using the store, make sure the data is set like this:

storeValue('categories', yourDataArray);

4. Check for Errors: Look for any errors in the browser console that might indicate issues with rendering or data access.

5. Custom Widget Setup: Ensure that your custom widget is set up correctly in Appsmith. The onReady function should be correctly initializing the widget.

6. Event Trigger: Make sure that appsmith.triggerEvent is correctly set up in your Appsmith application to handle the onCategoryClick event.

If everything seems correct and it's still not working, you might want to double-check the data structure and ensure that the categories array is in the expected format. If you continue to face issues, please let me know!

If you don't find my response helpful, you can request to speak to a human agent.

[viral salmon]

i'd like to comunicate with a human agent please

[hollow skiff]

Someone from our team will reach out to you on this thread. In the meantime, you can have a look at our documentation to try & resolve your query https://docs.appsmith.com?utm=bot