ReactJS | Change function Component into Class based one for ref error

Question

I have this dropdown Function Component in React. It is reusable, and it is giving an error like this.

    Warning: Function components cannot be given refs. Attempts to access this ref will fail.

I need to convert it to a class-based component. But I am hitting a wall. This is the class-based one, and below what I did. Could you point me to my surely stupid mistake?

    import React from 'react';
    import PropTypes from 'prop-types';
    import { toClass } from 'recompose';
    import Dropdown from 'react-bootstrap/lib/Dropdown';
    import DropdownButton from 'react-bootstrap/lib/DropdownButton';
    import SplitButton from 'react-bootstrap/lib/SplitButton';

    const { Item, Divider, Toggle, Button, Menu } = Dropdown;

    export { Item, Divider, Toggle, Button, Menu, DropdownButton, SplitButton, Dropdown };

    const CustomDropdown = ({ title, size, variant, customToggle, children, ...props }) => (
      <Dropdown {...props}>
        <Toggle size={size} variant={variant} as={customToggle}>
          {title}
        </Toggle>
        <Menu>{children}</Menu>
      </Dropdown>
    );

    CustomDropdown.defaultProps = {
      title: '',
      variant: 'primary',
      size: 'sm',
      drop: 'down',
      customToggle: toClass(props => <Toggle {...props} />)
    };

    CustomDropdown.propTypes = {
      title: PropTypes.string,
      variant: PropTypes.string,
      size: PropTypes.string,
      drop: PropTypes.string,
      customToggle: PropTypes.func
    };

    export default CustomDropdown;

And here is my conversion that doesn't work.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { toClass } from 'recompose';
import Dropdown from 'react-bootstrap/lib/Dropdown';
import DropdownButton from 'react-bootstrap/lib/DropdownButton';
import SplitButton from 'react-bootstrap/lib/SplitButton';

export class CustomDropdown extends Component {
  static propTypes = {
    title: propTypes.string,
    variant: propTypes.string,
    size: propTypes.string,
    drop: propTypes.string,
    customToggle: propTypes.func
  };

  static defaultProps = {
    title: '',
    variant: 'primary',
    size: 'sm',
    drop: 'down',
    customToggle: toClass(props => <Toggle {...props} />)
  };

  render() {
    const { title, size, variant, customToggle, children, ...props } = this.props;
    const { Item, Divider, Toggle, Button, Menu } = Dropdown;

    return (
      <div>
        <Dropdown {...props}>
          <Toggle size={size} variant={variant} as={customToggle}>
            {title}
          </Toggle>
          <Menu>{children}</Menu>
        </Dropdown>
      </div>
    )
  }
}

export default CustomDropdown;

The problem is that currently I don't user some named exports as well as DropdownButton and SplitButton . I use this component extensivly and I would like to stop seing that error everywhere....

Answer 1

The CustomDropdown class component can destructure only such properties that are referenced in its render method.

const { Toggle, Menu } = Dropdown;

Also its propTypes definitions should result in TypeErrors as func and string are not properties of propTypes but rather PropTypes

static propTypes = {
  title: PropTypes.string,
  variant: PropTypes.string,
  size: PropTypes.string,
  drop: PropTypes.string,
  customToggle: PropTypes.func
};