Hooks can only be called inside the body of a function component.

[jablonskipj]

I Want to implement the tooltip component using the Popper. Unfortunately, I am not able to render the Popper because of the error Hooks can only be called inside the body of a function component. I was using the hooks and render props implementation, and in both cases, I receive the same error. Please refer to a ScreenShot.

import React from 'react';
import { Popper } from 'react-popper';

const PopperComponent = ({ position, reference }) => {
  return (
    <Popper referenceElement={reference} placement={position}>
      {({ ref, style, arrowProps }) => (
        <div ref={ref} style={style}>
          Popper
          <div style={arrowProps.style} />
        </div>
      )}
    </Popper>
  );
};

export default PopperComponent;

What is the expected behavior?

The expected behavior is to render the popper component correctly.

Any other comments?

Packages versions

• Popper.js: 1.14.6
• react-popper: 2.2.3

[FezVrasta]

Thank you for your issue.

Unfortunately I can't answer to all the reported issues without a little help from you. Please, make sure to follow the issues template when you submit a new issue, in this way I will already have all the informations needed to understand the problem and help you with it.

I'm closing this issue for now, but feel free to open a new one making sure to follow all the instructions!

Thank you for your understanding.