How to use the react.forwardRef function in react

removeComponent: component => dispatch(removeComponent(component)),
	updateQuery: updateQueryObject => dispatch(updateQuery(updateQueryObject)),
	watchComponent: (component, react) => dispatch(watchComponent(component, react)),
	setQueryListener: (component, onQueryChange, beforeQueryChange) =>
		dispatch(setQueryListener(component, onQueryChange, beforeQueryChange)),
	setQueryOptions: (component, props, execute) =>
		dispatch(setQueryOptions(component, props, execute)),
});

const ConnectedComponent = connect(
	mapStateToProps,
	mapDispatchtoProps,
)(props => );

// eslint-disable-next-line
const ForwardRefComponent = React.forwardRef((props, ref) => (
	
));
hoistNonReactStatics(ForwardRefComponent, MultiDropdownRange);

ForwardRefComponent.name = 'MultiDropdownRange';
export default ForwardRefComponent;

import * as React from 'react';
import { Section, ResponsiveContent, Md, EditSection, Callout } from '../components';

export interface ContentProps {}

export const Content = React.forwardRef((_, ref) => (
  
    {/* start:auto-generated */}
    <section title="Introduction" id="section-introduction">
      {require('../../../../../../docs/introduction.md')}
      
    </section>
    
      <p>Looking for help on creating a Piral instance? Check out our guideline for an easy approach.</p>
    
    <section title="Features and Alternatives" id="section-features-and-alternatives">
      {require('../../../../../../docs/features.md')}
      
    </section>
    <section title="Architecture" id="section-architecture">
      {require('../../../../../../docs/architecture.md')}
      </section>

import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';
import { createMuiTheme } from '@material-ui/core';

const tableIcons = {
    Add: forwardRef((props, ref) => ),
    Check: forwardRef((props, ref) => ),
    Clear: forwardRef((props, ref) => ),
    Delete: forwardRef((props, ref) => ),
    DetailPanel: forwardRef((props, ref) => ),
    Edit: forwardRef((props, ref) => ),
    Export: forwardRef((props, ref) => ),
    Filter: forwardRef((props, ref) => ),
    FirstPage: forwardRef((props, ref) => ),
    LastPage: forwardRef((props, ref) => ),
    NextPage: forwardRef((props, ref) => ),
    PreviousPage: forwardRef((props, ref) => ),
    ResetSearch: forwardRef((props, ref) => ),
    Search: forwardRef((props, ref) => ),
    SortArrow: forwardRef((props, ref) => ),
    ThirdStateCheck: forwardRef((props, ref) => ),
    ViewColumn: forwardRef((props, ref) => )
};

/*
          - Id: CVE-2017-16997
            Info:

}
      },
    });
  });

  return (
    
      {clones}
    
  );
};

const AccordionItemContext = createContext();
const useAccordionItemContext = () => useContext(AccordionItemContext);

const AccordionItem = forwardRef(
  (
    { isOpen, defaultIsOpen, id, isDisabled, onChange, children, ...rest },
    ref,
  ) => {
    const [isExpanded, setIsExpanded] = useState(defaultIsOpen || false);
    const { current: isControlled } = useRef(isOpen != null);
    let _isExpanded = isControlled ? isOpen : isExpanded;

    const onToggle = () => {
      onChange && onChange(!_isExpanded);
      !isControlled && setIsExpanded(!isExpanded);
    };

    const uuid = useId();
    const uniqueId = id || uuid;

max-height: ${props.maxHeight};
`}
`;

interface IStyledMenuProps extends HTMLProps {
  /**
   * All valid [Popper.JS Placements](https://popper.js.org/popper-documentation.html#Popper.placements)
   */
  placement?: POPPER_PLACEMENT;
  animate?: boolean;
  small?: boolean;
  hidden?: boolean;
  maxHeight?: string;
}

export const StyledMenu = React.forwardRef(
  ({ placement, maxHeight, children, ...other }, ref) => {
    return (
      
        
          {children}
        
      
    );
  }
);

}

  addElement(entityOrLite: Lite | ModifiableEntity) {

    if (isLite(entityOrLite) != (this.props.type!.isLite || false))
      throw new Error("entityOrLite should be already converted");

    const list = this.props.ctx.value!;
    list.push(newMListElement(entityOrLite));
    this.setSelectedIndex(list.length - 1);
    this.setValue(list);
  }

}

export const EntityTabRepeater = React.forwardRef(function EntityTabRepeater(props: EntityTabRepeaterProps, ref: React.Ref) {
  const c = useController(EntityTabRepeaterController, props, ref);
  const p = c.props;

  const ctx = p.ctx!;

  if (c.isHidden)
    return null;

  if (p.avoidFieldSet == true)
    return (
      <div>
        {renderButtons()}
        {renderTabs()}
      </div>
    );

import PropTypes from "prop-types";
import { useTheme } from "./Theme/Providers";

interface OverlayProps {
  /** Whether the overlay is open */
  isOpen: boolean;
  /** Whatever you'd like to appear on top */
  children: React.ReactNode;
  /** Callback to handle closing the overlay */
  onRequestClose: () => void;
}

export const Overlay: React.RefForwardingComponent<
  React.Ref,
  OverlayProps
> = React.forwardRef(
  (
    { isOpen, onRequestClose, children }: OverlayProps,
    ref: React.Ref
  ) => {
    const theme = useTheme();
    const transitions = useTransition(isOpen, null, {
      from: { opacity: 0 },
      enter: { opacity: 1 },
      leave: { opacity: 0 }
    });

    const { bind } = useHideBody(isOpen);

    return (
      
        {transitions.map(

import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import CloseIcon from '@material-ui/icons/Close';
import Slide from '@material-ui/core/Slide';

const useStyles = makeStyles(theme => ({
  appBar: {
    position: 'relative',
  },
  title: {
    marginLeft: theme.spacing(2),
    flex: 1,
  },
}));

const Transition = React.forwardRef(function Transition(props, ref) {
  return ;
});

function FullScreenDialog() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  function handleClickOpen() {
    setOpen(true);
  }

  function handleClose() {
    setOpen(false);
  }

  return (

import React from "react";
import PropTypes from "prop-types";
import { withWrapper } from "../Icon";

const Vector = React.forwardRef(({ size, color, ...props }, ref) => (
  <svg aria-hidden="{!props[&quot;aria-label&quot;]}" viewBox="4 4 32 32" height="{size}" width="{size}">
    <path fill="{color}" d="M28 21h3V11H9v10h3v-3h-1a1 1 0 010-2h18a1 1 0 010 2h-1v3zm0 2v8a1 1 0 01-1 1H13a1 1 0 01-1-1v-8H8a1 1 0 01-1-1V10a1 1 0 011-1h24a1 1 0 011 1v12a1 1 0 01-1 1h-4zm-2-5H14v12h12V18zm-10 4a.5.5 0 110-1h4.4a.5.5 0 110 1H16zm0 3a.5.5 0 110-1h7a.5.5 0 110 1h-7zm0 3a.5.5 0 110-1h7a.5.5 0 110 1h-7zm12-15a.5.5 0 110 1h-4a.5.5 0 110-1h4z"></path>
  </svg>
));
Vector.propTypes = {

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import modifiers from '../../../modifiers';
import Element from '../../element';

const Control = React.forwardRef(({
  children,
  className,
  fullwidth,
  iconLeft,
  iconRight,
  loading,
  size,
  ...props
}, ref) => (