I have a react js code in a magento pwa app.
It has a component called categoryList and I need to add a horizontal scroll menu for that category list.
Following is my code
const mapCategory = categoryItem => {
const { items } = categoryItem.productImagePreview;
return {
...categoryItem,
productImagePreview: {
items: items.map(item => {
const { small_image } = item;
return {
...item,
small_image:
typeof small_image === 'object'
? small_image.url
: small_image
};
})
}
};
};
const list = [
{ name: 'item1' },
{ name: 'item2' },
{ name: 'item3' },
{ name: 'item4' },
{ name: 'item5' },
{ name: 'item6' },
{ name: 'item7' },
{ name: 'item8' },
{ name: 'item9' }
];
const MenuItem = ({ text, selected }) => {
return (
<div
className="menu-item"
>
{text}
</div>
);
};
export const Menu = (list) => list.map(el => {
const { name } = el;
return (
<MenuItem
text={name}
key={name}
/>
);
});
const Arrow = ({ text, className }) => {
return (
<div
className={className}
>{text}</div>
);
};
const ArrowLeft = Arrow({ text: '<', className: 'arrow-prev' });
const ArrowRight = Arrow({ text: '>', className: 'arrow-next' });
const CategoryList = props => {
const { id, title } = props;
const talonProps = useCategoryList({
query: categoryListQuery,
id
});
const { childCategories, error, loading } = talonProps;
const classes = mergeClasses(defaultClasses, props.classes);
console.log('ssss' +childCategories);
const header = title ? (
<div className={classes.header}>
<h2 className={classes.title}>
<span>{title}</span>
</h2>
</div>
) : null;
let child;
if (error) {
child = (
<div className={classes.fetchError}>
Data Fetch Error: <pre>{error.message}</pre>
</div>
);
}
if (loading || !childCategories) {
child = fullPageLoadingIndicator;
} else if (childCategories.length === 0) {
child = (
<div className={classes.noResults}>No child categories found.</div>
);
} else {
const { selected } = this.state;
// Create menu from items
const menu = Menu(list, selected);
child = (
<div className={classes.content}>
{childCategories.map((item, index ) => (
<CategoryTile item={mapCategory(item)} key={index} />
))}
<ScrollMenu data={menu}
arrowLeft={ArrowLeft}
arrowRight={ArrowRight}
onSelect=''
/>
</div>
);
}
return (
<div className={classes.root}>
{header}
{child}
</div>
);
};
CategoryList.propTypes = {
id: number,
title: string,
classes: shape({
root: string,
header: string,
content: string
})
};
export default CategoryList;
I get the following error when I try to use this code. The error seems to be about not being to resolve a specific package or module.
ERROR in ./src/components/CategoryList/categoryList.js
Module not found: Error: Can't resolve 'react-horizontal-scrolling-menu/build/scrollMenu' in '/var/www/html/apekade/apekade-pwa/packages/pwa-neosolax/src/components/CategoryList'
ℹ ｢wdm｣: Failed to compile.
I dont know if I have placed the code correct.I'm a beginner.Please help
