how to give navigation for list in horizontal menu of reactjs

Question

Can any one help to get the solution for this question, for page navigation i am using react-horizontal-scrolling-menu. in the reactjs application. Just i want give page navigation where i should give navigation please tell me. this code has giving by the link https://https://www.npmjs.com/package/react-horizontal-scrolling-menu

    import React, { Component } from 'react';
    import ScrollMenu from 'react-horizontal-scrolling-menu';
    import './App.css';

    // 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 ${selected ? 'active' : ''}`}
        >{text}</div>;
    };

    // All items component
    // Important! add unique key
    export const Menu = (list, selected) =>
      list.map(el => {
        const {name} = el;

        return <MenuItem text={name} key={name} selected={selected} />;
      });


    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 selected = 'item1';

    class App extends Component {
      constructor(props) {
        super(props);
        // call it again if items count changes
        this.menuItems = Menu(list, selected);
      }

      state = {
        selected
      };

      onSelect = key => {
        this.setState({ selected: key });
      }


      render() {
        const { selected } = this.state;
        // Create menu from items
        const menu = this.menuItems;

        return (
          <div className="App">
            <ScrollMenu
              data={menu}
              arrowLeft={ArrowLeft}
              arrowRight={ArrowRight}
              selected={selected}
              onSelect={this.onSelect}
            />
          </div>
        );
      }
    }
'css code start here '
.menu-item {
  padding: 0 40px;
  margin: 5px 10px;
  user-select: none;
  cursor: pointer;
  border: none;
}
.menu-item-wrapper.active {
  border: 1px blue solid;
}
.menu-item.active {
  border: 1px green solid;
}

.scroll-menu-arrow {
  padding: 20px;
  cursor: pointer;
}

Answer 1

Link to this library is not working.

You can add another property to your list like { name: 'item1', url: '/somecomponenturl' }

Then in your Menu function just pass the URL as prop just like text prop and in MenuItem function use your url with Link or NavLink like:

const MenuItem = ({text, url, selected}) => {
  return <div
    className={`menu-item ${selected ? 'active' : ''}`}
    ><Link to={url}>{text}</Link></div>;
};

export const Menu = (list, selected) =>
  list.map(el => {
    const {name} = el;
    const {url} = el;
    return <MenuItem text={name} url={url} key={name} selected={selected} />;
  });

Answer 2

You are missing specified paths (or what resolves to pathnames) from your list of routes that are passed to the Link component's to prop.

// list of items
const list = [
  { name: "item1", path: "/" },
  { name: "item2" }, // MISSING path properties!
  { name: "item3", path: "./abcd" },
  { name: "item4" },
  { name: "item5" },
  { name: "item6" },
  { name: "item7" },
  { name: "item8" },
  { name: "item9", path: "./example_1" }
];

// One item component
// selected prop will be passed
const MenuItem = ({ text, path, selected }) => {
  return (
    <div className={`menu-item ${selected ? "active" : ""}`}>
      <NavLink exact to={path}> // All links must have a defined to prop
        {text}
      </NavLink>
    </div>
  );
};

It is a simple fix to add a defined path for each route in your config. For example:

const list = [
  { name: "item1", path: "/" },
  { name: "item2", path: "/page/1" },
  { name: "item3", path: "/abcd" },
  { name: "item4", path: "/page/2" },
  { name: "item5", path: "/page/3" },
  { name: "item6", path: "/page/4" },
  { name: "item7", path: "/page/42" },
  { name: "item8", path: "/example_1" },
  { name: "item9", path: "/page/5" }
];

DEMO I've taken the liberty of forking your sandbox, updated to specify paths, and only define the menu once and display in one location (DRY principle) in your root App.