React horizontal scroll componet doesn't visible

Question

I'm trying to implement react horizontal scroll using React horizontal scrolling menu library, but when I use this component in my react app, it shows nothing and I am also not getting any error message.

Here is the code of that component:

import React, { useState } from "react";
import { ScrollMenu } from "react-horizontal-scrolling-menu";

// list of items
const list = [
  { name: "item1" },
  { name: "item2" },
  { name: "item3" },
  { name: "item4" },
  { name: "item5" },
  { name: "item6" },
  { name: "item7" },
  { name: "item8" },
  { name: "item9" },
];

// One item component
// selected prop will be passed
const MenuItem = ({ text, selected }) => {
  return <div className="menu-item text-black">{text}</div>;
};

// All items component
// Important! add unique key
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 AvataaarsScroll = () => {
  const [selected, setSelected] = useState(0);

  const onSelect = (key) => {
    setSelected(key);
  };
  // Create menu from items
  const menu = Menu(list, selected);

  return (
    <div className="App">
      <ScrollMenu
        data={menu}
        arrowLeft={ArrowLeft}
        arrowRight={ArrowRight}
        selected={selected}
        onSelect={onSelect}
      />
    </div>
  );
};

export default AvataaarsScroll;

Anyone please help me with this.

Answer 1

You are sending the menu items to the ScrollMenu through the property named data, but you need to send them as children elements:

<div className="App">
  <ScrollMenu
    arrowLeft={ArrowLeft}
    arrowRight={ArrowRight}
    selected={selected}
    onSelect={onSelect}
  >
    {menu}
  </ScrollMenu>
</div>

...or...

<ScrollMenu        
  arrowLeft={ArrowLeft}
  arrowRight={ArrowRight}
  selected={selected}
  onSelect={onSelect}
  children={menu}
/>