CODEWITHSUNDEEP
javascriptreactjsjsx
Shaonline
Shaonline

Reputation: 1637

How to link or route the react semantic UI dropdown component

I am a newbie to React. I am trying to add links to the React semantic UI dropdown menu. Following is the component that I fetched from React semantic UI

import React from "react";
import { Dropdown } from "semantic-ui-react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const trigger = (
  <span style={{ marginTop: "2px" }}>
    <i aria-hidden="true" class="user big icon" size="big" />
  </span>
);
const options = [
  { key: "user", text: "Account", icon: "user", to: "/accounts" },
  { key: "settings", text: "Settings", icon: "settings", to: "/settings" },
  { key: "sign-out", text: "Sign Out", icon: "sign out", to: "/sign-out" }
];

const DropdownMenu = () => (
  <Dropdown
    trigger={trigger}
    options={options}
    pointing="top right"
    icon={null}
  />
);

export default DropdownMenu;

I tried adding "to" keyword to the options array and have added the Route paths to the Router which lies in a different component but it's not working. Any help would be appreciated, Thank you.

Upvotes: 4

Views: 2325

Answers (3)

meck373
meck373

Reputation: 1124

My solution based on the answer from Jan Fara:

import React from 'react';
import { Dropdown } from 'semantic-ui-react';
import Avatar from 'react-avatar';
import { Link } from 'react-router-dom';

function DropdownuserMenu() {
  const trigger = (
    <span>
      <Avatar name='Happy User' size="40"/>
    </span>
  );
  return (
    <Dropdown trigger={trigger} pointing='top left' icon={null}>
      <Dropdown.Menu>
        <Dropdown.Item text='Account' icon='user' as={Link} to='/accounts'/>
        <Dropdown.Item text='Settings' icon='settings' as={Link} to='/settings'/>
        <Dropdown.Item text='Sign Out' icon='sign out' as={Link} to='/sign-out'/>
      </Dropdown.Menu>
    </Dropdown>
  );
}
export default DropdownuserMenu;

Upvotes: 1

Jan Fara
Jan Fara

Reputation: 71

Or you can use Dropdown.Menu and Dropdown.Item. Each Dropdown.Item can have param as={Link} to='/somewhere'/.

import React from "react";
import { Dropdown } from "semantic-ui-react";
import { Link } from "react-router-dom";

const trigger = (
    <span style={{ marginTop: "2px" }}>
        <i aria-hidden="true" class="user big icon" size="big" />
    </span>
);

const DropdownMenu = () => (
    <Dropdown trigger={trigger} pointing='top left' icon={null}>
        <Dropdown.Menu>
            <Dropdown.Item text='Account' icon='user' as={Link} to='/accounts'/>
            <Dropdown.Item text='Settings' icon='settings' as={Link} to='/settings'/>
            <Dropdown.Item text='Sign Out' icon='sign out' as={Link} to='/sign-out'/>
        </Dropdown.Menu>
    </Dropdown>
);

export default DropdownMenu;

I hope it will help you.

Upvotes: 5

TRomesh
TRomesh

Reputation: 4481

You can try something like this. change the key to to value in you options array. then use onChange method to handle the selection. You may want to pass the history prop from parent component down to the component you want to invoke the action if its not available.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Dropdown, Form } from "semantic-ui-react";

const trigger = (
  <span style={{ marginTop: "2px" }}>
    <i aria-hidden="true" class="user big icon" size="big" />
  </span>
);

const options = [
  { key: "user", text: "Account", icon: "user", value: "/accounts" },
  { key: "settings", text: "Settings", icon: "settings", value: "/settings" },
  { key: "sign-out", text: "Sign Out", icon: "sign out", value: "/sign-out" }
];

class App extends Component {
  move = (e, { value }) => {
    this.props.history.push('value')
  }

  render() {
    return (
      <div>
        <Dropdown
          options={options}
          trigger={trigger}
          icon={null}
          onChange={this.move}
        />
      </div>
    );
  }
}

Upvotes: 3

Related Questions