MapFilter.actionButton option ignores nested content

[GoGoCarl]

Example:

<MapFilter 
  ...options,
  actionButton={<Button fab mini color='primary' onClick={this.handleClick}><SaveIcon color='accent' /></Button>} />

I would expect this to produce a floating action button with a save icon in the button.

Instead, the button is display with no icon.

Upon inspecting the element itself, the Button icon does not have any children.

I'd venture to guess the element is being cloned and the clone is shallow, thus ignoring child elements (and, in this case, ignoring the SaveIcon in the example above).

I am able to support these findings by wrapping the button and icon in a component class, and then using it as the actionButton parameter, as shown in this workaround:

class ActionButton extends Component {
  render () {
    return (
      <Button fab mini color='primary' onClick={this.props.onClick}><SaveIcon color='accent' /></Button>
    )
  }
}

class MyWrapper extends Component {
  render () {
    return (
      <MapFilter
        ...options,
        actionButton={<ActionButton onClick={this.handleClick} />} />
    )
  }
}

[gmaclennan]

Thanks for this @GoGoCarl, and for the workaround. The solution for this is tricky, and I think we need to change these properties for composing the UI to render properties, e.g. renderActionButton which should be a function that returns a React Element. I think this will solve this problem and reduce confusion between passing a component class to this property or an instance.