fix NotAvailableForGuest

src/client/js/components/NotAvailableForGuest.jsx

@@ -5,28 +5,26 @@ import { UncontrolledTooltip } from 'reactstrap';
 
 const NotAvailableForGuest = ({ children }) => {
 
-  const id = `not-available-for-guest-${Math.random().toString(32).substring(2)}`;
+  const id = children.props.id || `grw-not-available-for-guest-${Math.random().toString(32).substring(2)}`;
 
   // clone and add className
-  const clonedChildren = React.Children.map(children, child => (
-    React.cloneElement(child, {
-      id,
-      className: `${child.props.className} grw-not-available-for-guest`,
-      onClick: () => { /* do nothing */ },
-    })
-  ));
+  const clonedChild = React.cloneElement(children, {
+    id,
+    className: `${children.props.className} grw-not-available-for-guest`,
+    onClick: () => { /* do nothing */ },
+  });
 
   return (
     <>
-      { clonedChildren }
-      {/* <UncontrolledTooltip placement="bottom" fade={false} target={id}>Not available for guest</UncontrolledTooltip> */}
+      { clonedChild }
+      <UncontrolledTooltip placement="top" target={id}>Not available for guest</UncontrolledTooltip>
     </>
   );
 
 };
 
 NotAvailableForGuest.propTypes = {
-  children: PropTypes.array.length(1).isRequired,
+  children: PropTypes.node.isRequired,
 };
 
 export default NotAvailableForGuest;