How to Create a dropdown Button with see more option and on click toggle should not happen in react js?

Question

I want to add see more option to fetch data

import React, { useState } from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

const Example = (props) => {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const toggle = () => setDropdownOpen(prevState => !prevState);

  return (
    <Dropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret>
        Dropdown
        </DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>Header</DropdownItem>
        <DropdownItem>Some Action</DropdownItem>
        <DropdownItem>Some Action</DropdownItem>
        <DropdownItem onClick={(e) => {this.showAllData(e)} }>See Action</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

export default Example;

I Just want to fetch more data on click of dropdown item without closing dropdown, can anyone give to solution to figure out this.

Answer 1

just keep toggle={false} for dropdown item

<DropdownItem toggle={false} onClick={(e) => {this.showAllData(e)} }>See Action</DropdownItem>