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

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.

Answer 2

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} />;
  });