React: CSVLink not working when put inside MenuItem in DropdownButton

Question

I have code in a React file like this:

    import {Dropdown, DropdownButton, MenuItem} from "react-bootstrap";
    import {CSVLink} from "react-csv";
    <DropdownButton id={'sdfsd'} title={
      <>
        <img src={exportIcon}/>Export
      </>
    }>
      <MenuItem>
        <CSVLink data={myCsvData} filename={`first-case.csv`}>First Case</CSVLink>
      </MenuItem>
      <MenuItem>
        <CSVLink data={mySecondCsvData} className="link" filename={`second-case.csv`}>Second Case</CSVLink>
      </MenuItem>
    </DropdownButton>

You can see that the CSVLink is wrapped inside MenuItem. It's used to download Excel sheet with the data, but it's not working now. When I click on it, nothing is happening.

How to make it work?

score 1 · Accepted Answer · answered Apr 04 '23 at 08:40

After a lot of struggle, I'm able to find the reason behind this.

First of all, the component MenuItem is only available in react-bootstrap version v0.33.1 where as the latest version available as of now is v2.7.2. There are a huge number of changes between the two versions, so please use the latest if you can.

The solution to this is add the prop "header" to the MenuItem like this:

<MenuItem header>
    ....
<MenuItem/>

This prop styles the menu item as a header label, and is useful for describing a group of menu items or items with links present in them.

Reason behind this:

If you don't put the prop header, it compiles to html code:

<a href="#">
    ......
</a>

You can see that it wraps inner elements with href="#", so, when you click on the element, this href gets triggered.

If you look at the source code, it says,

if (this.props.header) {
  children = this.props.children;
} else if (!this.props.divider) {
  children = React.createElement("a", { onClick: this.handleClick, href: this.props.href, title: this.props.title, tabIndex: "-1" },
    this.props.children
  )
}

score 0 · Answer 2 · edited Apr 03 '23 at 08:23

0

I faced a similar problem yesterday, I found out that the MenuItem spans the whole width, but the child <CSVLink>'s width and height are not spanned to the width and height of its parent, that is, MenuItem.

For it to work, you have to exactly click on the area that the component <CSVLink> spans, not the area outside it in the MenuItem. For the component <CSVLink> to span the full width of its parent, add a custom style to it.

<CSVLink
  data={myCsvData}
  filename={`first-case.csv`}
  style={{
    textDecoration: "none",
    width: "100%"
  }}
>
  First Case
</CSVLink>

edited Apr 03 '23 at 08:23

halfer

19,824
17
99
186

answered Apr 03 '23 at 07:08

Geeky Quentin

2,469
2
7
28

Also, I just checked and the above answer doesn't seem to be right. It doesn't work. – Light Yagami Apr 04 '23 at 06:48
@halfer then who will decide to whom the bounty points go to? The author can add appropriate answer and accept, but it might not be the answer the person who put the bounty is happy with. – Light Yagami Apr 04 '23 at 08:28
@LightYagami: the bounty owner gets to decide, I think. It's a separate system from answer acceptance. – halfer Apr 04 '23 at 08:37
Lots of bounty help articles here: https://stackoverflow.com/help/search?q=bounty – halfer Apr 04 '23 at 08:37

React: CSVLink not working when put inside MenuItem in DropdownButton

2 Answers2