How to display two links based on the selected option?

Question

I have two key/values. Based on the selection I want to display simple links. If I select first option it will display two links and when the second option is selected it will display another two links. How to display them?

This is my current code

import React from "react"
import { Dropdown, Menu, Icon } from 'antd'

class DropOption extends React.Component {
    state = {
        visible: false,
    };

    handleMenuClick = (e) => {
        if (e.key === '1') {

        }
        else {

        }
      }

    render() {
        const menu = (
            <Menu onClick={this.handleMenuClick}>
                <Menu.Item key="1">CULT-4A</Menu.Item>
                <Menu.Item key="2">HIN-4A</Menu.Item>
            </Menu>
        )
        return (
            <div align="center">
                <Dropdown
                    overlay={menu}>
                    <a className="ant-dropdown-link" href="#">
                        Select one option<Icon type="down" />
                    </a>
                </Dropdown>
            </div>
        )
    }
}

export default DropOption

Answer 1

You should use the state of your component. You can change state value of your component by using the setState({ key: value }) method.

handleMenuClick = e => {
  this.setState({ selectedOption: e.key });
};

The state value can then be used in the Render method by using this.state.key

<div>
  {this.state.selectedOption === "option1" && (
    <ul>
      <li>
        <a href="/link1">Option 1 - link1</a>
      </li>
      <li>
        <a href="/link1">Option 1 - link2</a>
      </li>
    </ul>
  )}
</div>

You can also build the menu from an array :

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Dropdown, Menu, Icon } from "antd";

class DropOption extends React.Component {
  state = { selectedOption : null };

  handleMenuClick = e => {
    this.setState({ selectedOption: e.key });
  };

  items = [
    {
      key: "option1",
      text: "CULT-4A",
      links: [
        { text: "option1 - link1", url: "/linkCULT-1" },
        { text: "option1 - link2", url: "/linkCULT-2" }
      ]
    },
    {
      key: "option2",
      text: "HIN-4A",
      links: [
        { text: "option2 - link1", url: "/linkHIN-1" },
        { text: "option2 - link2", url: "/linkHIN-2" }
      ]
    }
  ];

  render() {
    const currentItem = this.items.find(
      item => item.key === this.state.selectedOption
    );
    const links = currentItem ? currentItem.links : [];

    console.log(links);

    const menu = (
      <Menu onClick={this.handleMenuClick}>
        {this.items.map(item => (
          <Menu.Item key={item.key}>{item.text}</Menu.Item>
        ))}
      </Menu>
    );
    return (
      <div align="center">
        <Dropdown overlay={menu}>
          <a className="ant-dropdown-link" href="#">
            Select one option
            <Icon type="down" />
          </a>
        </Dropdown>
        {links.length > 0 && (
          <div>
            <ul>
              {links.map(link => {
                return (
                  <li key="{link.url}">
                    <a href="{link.url}">{link.text}</a>
                  </li>
                );
              })}
            </ul>
          </div>
        )}
      </div>
    );
  }
}

export default DropOption;
const rootElement = document.getElementById("root");

ReactDOM.render(<DropOption />, rootElement);

See https://codesandbox.io/s/qxjknok10j for a working example