material UI CardHeader action drop-down

Question

I am trying to add a FormControl, a Select component and a MenuItem to the action prop of the CardHeader IconButton.

Currently the code looks like this:

Rendering:

<CardHeader
  action={
    <IconButton
      onClick={this.renderFilterRequest()}
    >
      <Edit />
    </IconButton>
    }
/>

onClick method:

renderFilterRequest() {
  const { selection } = this.state;
  return (
    <div>
      <FormControl>
        <Select
          value={selection}
          onChange={this.handleFilterChange}
        >
          <MenuItem value='1'>January</MenuItem>
          <MenuItem value='2'>February</MenuItem>

        </Select>
      </FormControl>
    </div>
  );
}

The error I get is onClick listener to be a function, instead got a value of object type. What is the right way to render the dropdown menu on CardHeader action click?

mehamasum mehamasum · Accepted Answer · 2019-02-06T16:14:38

You are returning some div from from this.renderFilterRequest, And you are also calling the function, so the value of onClick becomes the div. But they were meant to be functions, right?

So it should have been just: onClick={this.renderFilterRequest}.
This function also returned a div but there is no way to attach it to rendering logic in render.

You need to put the MenuItems in your render method and show/hide them depending on the state.

Your onClick listener should be a function that changes the state so that the MenuItems become visible.

Here is a simple demo how this should be done:

material UI CardHeader action drop-down

1 Answers