diff --git a/docs/src/pages/demos/menus/FadeMenu.js b/docs/src/pages/demos/menus/FadeMenu.js
index 3ed6a101389d55..0283739bf8fa1b 100644
--- a/docs/src/pages/demos/menus/FadeMenu.js
+++ b/docs/src/pages/demos/menus/FadeMenu.js
@@ -19,11 +19,12 @@ class FadeMenu extends React.Component {
 
   render() {
     const { anchorEl } = this.state;
+    const open = Boolean(anchorEl);
 
     return (
       <div>
         <Button
-          aria-owns={anchorEl ? 'fade-menu' : null}
+          aria-owns={open ? 'fade-menu' : null}
           aria-haspopup="true"
           onClick={this.handleClick}
         >
@@ -32,7 +33,7 @@ class FadeMenu extends React.Component {
         <Menu
           id="fade-menu"
           anchorEl={anchorEl}
-          open={Boolean(anchorEl)}
+          open={open}
           onClose={this.handleClose}
           TransitionComponent={Fade}
         >
diff --git a/docs/src/pages/demos/menus/LongMenu.js b/docs/src/pages/demos/menus/LongMenu.js
index 453d15d2cfaf48..956396a7ce93e1 100644
--- a/docs/src/pages/demos/menus/LongMenu.js
+++ b/docs/src/pages/demos/menus/LongMenu.js
@@ -38,12 +38,13 @@ class LongMenu extends React.Component {
 
   render() {
     const { anchorEl } = this.state;
+    const open = Boolean(anchorEl);
 
     return (
       <div>
         <IconButton
           aria-label="More"
-          aria-owns={anchorEl ? 'long-menu' : null}
+          aria-owns={open ? 'long-menu' : null}
           aria-haspopup="true"
           onClick={this.handleClick}
         >
@@ -52,7 +53,7 @@ class LongMenu extends React.Component {
         <Menu
           id="long-menu"
           anchorEl={anchorEl}
-          open={Boolean(anchorEl)}
+          open={open}
           onClose={this.handleClose}
           PaperProps={{
             style: {
diff --git a/docs/src/pages/demos/menus/RenderPropsMenu.js b/docs/src/pages/demos/menus/RenderPropsMenu.js
new file mode 100644
index 00000000000000..a7323bac4f4943
--- /dev/null
+++ b/docs/src/pages/demos/menus/RenderPropsMenu.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import toRenderProps from 'recompose/toRenderProps';
+import withState from 'recompose/withState';
+
+const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null));
+
+function RenderPropsMenu() {
+  return (
+    <WithState>
+      {({ anchorEl, updateAnchorEl }) => {
+        const open = Boolean(anchorEl);
+        const handleClose = () => {
+          updateAnchorEl(null);
+        };
+
+        return (
+          <React.Fragment>
+            <Button
+              aria-owns={open ? 'render-props-menu' : null}
+              aria-haspopup="true"
+              onClick={event => {
+                updateAnchorEl(event.currentTarget);
+              }}
+            >
+              Open Menu
+            </Button>
+            <Menu id="render-props-menu" anchorEl={anchorEl} open={open} onClose={handleClose}>
+              <MenuItem onClick={handleClose}>Profile</MenuItem>
+              <MenuItem onClick={handleClose}>My account</MenuItem>
+              <MenuItem onClick={handleClose}>Logout</MenuItem>
+            </Menu>
+          </React.Fragment>
+        );
+      }}
+    </WithState>
+  );
+}
+
+export default RenderPropsMenu;
diff --git a/docs/src/pages/demos/menus/menus.md b/docs/src/pages/demos/menus/menus.md
index 03587b2745068d..a05a7a8310ff14 100644
--- a/docs/src/pages/demos/menus/menus.md
+++ b/docs/src/pages/demos/menus/menus.md
@@ -55,3 +55,10 @@ You can use the same list composition features with the `MenuItem` component:
 Use a different transition altogether.
 
 {{"demo": "pages/demos/menus/FadeMenu.js"}}
+
+## Render Props
+
+It is a [render props](https://reactjs.org/docs/render-props.html) demo that
+keeps track of the local state for a single menu.
+
+{{"demo": "pages/demos/menus/RenderPropsMenu.js"}}
diff --git a/docs/src/pages/utils/popover/MouseOverPopover.js b/docs/src/pages/utils/popover/MouseOverPopover.js
index ba00447826b0d5..b4db4f395a66b6 100644
--- a/docs/src/pages/utils/popover/MouseOverPopover.js
+++ b/docs/src/pages/utils/popover/MouseOverPopover.js
@@ -21,7 +21,7 @@ class MouseOverPopover extends React.Component {
   };
 
   handlePopoverOpen = event => {
-    this.setState({ anchorEl: event.target });
+    this.setState({ anchorEl: event.currentTarget });
   };
 
   handlePopoverClose = () => {
@@ -35,10 +35,16 @@ class MouseOverPopover extends React.Component {
 
     return (
       <div>
-        <Typography onMouseEnter={this.handlePopoverOpen} onMouseLeave={this.handlePopoverClose}>
+        <Typography
+          aria-owns={open ? 'mouse-over-popover' : null}
+          aria-haspopup="true"
+          onMouseEnter={this.handlePopoverOpen}
+          onMouseLeave={this.handlePopoverClose}
+        >
           Hover with a Popover.
         </Typography>
         <Popover
+          id="mouse-over-popover"
           className={classes.popover}
           classes={{
             paper: classes.paper,
diff --git a/docs/src/pages/utils/popover/RenderPropsPopover.js b/docs/src/pages/utils/popover/RenderPropsPopover.js
new file mode 100644
index 00000000000000..7a52bba23be1ec
--- /dev/null
+++ b/docs/src/pages/utils/popover/RenderPropsPopover.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import Popover from '@material-ui/core/Popover';
+import toRenderProps from 'recompose/toRenderProps';
+import withState from 'recompose/withState';
+
+const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null));
+
+const styles = theme => ({
+  typography: {
+    margin: theme.spacing.unit * 2,
+  },
+});
+
+function RenderPropsPopover(props) {
+  const { classes } = props;
+
+  return (
+    <WithState>
+      {({ anchorEl, updateAnchorEl }) => {
+        const open = Boolean(anchorEl);
+        return (
+          <React.Fragment>
+            <Button
+              aria-owns={open ? 'render-props-popover' : null}
+              aria-haspopup="true"
+              variant="contained"
+              onClick={event => {
+                updateAnchorEl(event.currentTarget);
+              }}
+            >
+              Open Popover
+            </Button>
+            <Popover
+              id="render-props-popover"
+              open={open}
+              anchorEl={anchorEl}
+              onClose={() => {
+                updateAnchorEl(null);
+              }}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'center',
+              }}
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'center',
+              }}
+            >
+              <Typography className={classes.typography}>The content of the Popover.</Typography>
+            </Popover>
+          </React.Fragment>
+        );
+      }}
+    </WithState>
+  );
+}
+
+RenderPropsPopover.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(RenderPropsPopover);
diff --git a/docs/src/pages/utils/popover/SimplePopover.js b/docs/src/pages/utils/popover/SimplePopover.js
index a960037475de94..20e0c73ac9a89e 100644
--- a/docs/src/pages/utils/popover/SimplePopover.js
+++ b/docs/src/pages/utils/popover/SimplePopover.js
@@ -31,14 +31,21 @@ class SimplePopover extends React.Component {
   render() {
     const { classes } = this.props;
     const { anchorEl } = this.state;
+    const open = Boolean(anchorEl);
 
     return (
       <div>
-        <Button variant="contained" onClick={this.handleClick}>
+        <Button
+          aria-owns={open ? 'simple-popper' : null}
+          aria-haspopup="true"
+          variant="contained"
+          onClick={this.handleClick}
+        >
           Open Popover
         </Button>
         <Popover
-          open={Boolean(anchorEl)}
+          id="simple-popper"
+          open={open}
           anchorEl={anchorEl}
           onClose={this.handleClose}
           anchorOrigin={{
diff --git a/docs/src/pages/utils/popover/popover.md b/docs/src/pages/utils/popover/popover.md
index dda4aecec7eb01..bb1568dcb7e96d 100644
--- a/docs/src/pages/utils/popover/popover.md
+++ b/docs/src/pages/utils/popover/popover.md
@@ -30,3 +30,10 @@ the position of the popover.
 We demonstrate how to use the `Popover` component to implement a popover behavior based on the mouse over event.
 
 {{"demo": "pages/utils/popover/MouseOverPopover.js"}}
+
+## Render Props
+
+It is a [render props](https://reactjs.org/docs/render-props.html) demo that
+keeps track of the local state for a single popover.
+
+{{"demo": "pages/utils/popover/RenderPropsPopover.js"}}
diff --git a/docs/src/pages/utils/popper/FakedReferencePopper.js b/docs/src/pages/utils/popper/FakedReferencePopper.js
index 93256c6c83d1b8..992607178309e4 100644
--- a/docs/src/pages/utils/popper/FakedReferencePopper.js
+++ b/docs/src/pages/utils/popper/FakedReferencePopper.js
@@ -50,10 +50,11 @@ class FakedReferencePopper extends React.Component {
   render() {
     const { classes } = this.props;
     const { anchorEl, open } = this.state;
+    const id = open ? 'faked-reference-popper' : null;
 
     return (
       <div onMouseLeave={this.handleClose}>
-        <Typography onMouseUp={this.handleMouseUp}>
+        <Typography aria-describedby={id} onMouseUp={this.handleMouseUp}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit
           amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi
           finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada
@@ -62,7 +63,7 @@ class FakedReferencePopper extends React.Component {
           facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse
           lacinia tellus a libero volutpat maximus.
         </Typography>
-        <Popper open={open} anchorEl={anchorEl} transition placement="bottom-start">
+        <Popper id={id} open={open} anchorEl={anchorEl} transition placement="bottom-start">
           {({ TransitionProps }) => (
             <Fade {...TransitionProps} timeout={350}>
               <Paper>
diff --git a/docs/src/pages/utils/popper/RenderPropsPopper.js b/docs/src/pages/utils/popper/RenderPropsPopper.js
new file mode 100644
index 00000000000000..33ca8ead74ffb3
--- /dev/null
+++ b/docs/src/pages/utils/popper/RenderPropsPopper.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Popper from '@material-ui/core/Popper';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import Fade from '@material-ui/core/Fade';
+import Paper from '@material-ui/core/Paper';
+import toRenderProps from 'recompose/toRenderProps';
+import withState from 'recompose/withState';
+
+const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null));
+
+const styles = theme => ({
+  typography: {
+    padding: theme.spacing.unit * 2,
+  },
+});
+
+function RenderPropsPopper(props) {
+  const { classes } = props;
+
+  return (
+    <WithState>
+      {({ anchorEl, updateAnchorEl }) => {
+        const open = Boolean(anchorEl);
+        const id = open ? 'render-props-popper' : null;
+        return (
+          <React.Fragment>
+            <Button
+              aria-describedby={id}
+              variant="contained"
+              onClick={event => {
+                updateAnchorEl(anchorEl ? null : event.currentTarget);
+              }}
+            >
+              Toggle Popper
+            </Button>
+            <Popper id={id} open={open} anchorEl={anchorEl} transition>
+              {({ TransitionProps }) => (
+                <Fade {...TransitionProps} timeout={350}>
+                  <Paper>
+                    <Typography className={classes.typography}>
+                      The content of the Popper.
+                    </Typography>
+                  </Paper>
+                </Fade>
+              )}
+            </Popper>
+          </React.Fragment>
+        );
+      }}
+    </WithState>
+  );
+}
+
+RenderPropsPopper.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(RenderPropsPopper);
diff --git a/docs/src/pages/utils/popper/ScrollPlayground.js b/docs/src/pages/utils/popper/ScrollPlayground.js
index a134cffca71d0b..10ddd4d56deb55 100644
--- a/docs/src/pages/utils/popper/ScrollPlayground.js
+++ b/docs/src/pages/utils/popper/ScrollPlayground.js
@@ -175,6 +175,7 @@ class AnchorPlayground extends React.Component {
 >
 \`\`\`
 `;
+    const id = open ? 'scroll-playground' : null;
 
     return (
       <div className={classes.root}>
@@ -188,6 +189,7 @@ class AnchorPlayground extends React.Component {
                   }}
                   variant="contained"
                   onClick={this.handleClickButton}
+                  aria-describedby={id}
                 >
                   Toggle Popper
                 </Button>
@@ -196,6 +198,7 @@ class AnchorPlayground extends React.Component {
                   modifiers.
                 </Typography>
                 <Popper
+                  id={id}
                   open={open}
                   anchorEl={this.anchorEl}
                   placement={placement}
diff --git a/docs/src/pages/utils/popper/popper.md b/docs/src/pages/utils/popper/popper.md
index 244f4715ed53e5..330d0c2e4ac583 100644
--- a/docs/src/pages/utils/popper/popper.md
+++ b/docs/src/pages/utils/popper/popper.md
@@ -40,3 +40,10 @@ You just need to create an object shaped like the [`ReferenceObject`](https://gi
 Highlight part of the text to see the popper:
 
 {{"demo": "pages/utils/popper/FakedReferencePopper.js"}}
+
+## Render Props
+
+It is a [render props](https://reactjs.org/docs/render-props.html) demo that
+keeps track of the local state for a single popper.
+
+{{"demo": "pages/utils/popper/RenderPropsPopper.js"}}
diff --git a/pages/demos/menus.js b/pages/demos/menus.js
index 64d81ce3a5a214..06d935e252eda1 100644
--- a/pages/demos/menus.js
+++ b/pages/demos/menus.js
@@ -48,6 +48,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/menus/FadeMenu'), 'utf8')
+`,
+        },
+        'pages/demos/menus/RenderPropsMenu.js': {
+          js: require('docs/src/pages/demos/menus/RenderPropsMenu').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/menus/RenderPropsMenu'), 'utf8')
 `,
         },
       }}
diff --git a/pages/utils/popover.js b/pages/utils/popover.js
index f62cdf2b48daef..fd72e70426c473 100644
--- a/pages/utils/popover.js
+++ b/pages/utils/popover.js
@@ -27,6 +27,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/utils/popover/MouseOverPopover'), 'utf8')
+`,
+        },
+        'pages/utils/popover/RenderPropsPopover.js': {
+          js: require('docs/src/pages/utils/popover/RenderPropsPopover').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/utils/popover/RenderPropsPopover'), 'utf8')
 `,
         },
       }}
diff --git a/pages/utils/popper.js b/pages/utils/popper.js
index c4d81415697622..248875e8e6969e 100644
--- a/pages/utils/popper.js
+++ b/pages/utils/popper.js
@@ -41,6 +41,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/utils/popper/ScrollPlayground'), 'utf8')
+`,
+        },
+        'pages/utils/popper/RenderPropsPopper.js': {
+          js: require('docs/src/pages/utils/popper/RenderPropsPopper').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/utils/popper/RenderPropsPopper'), 'utf8')
 `,
         },
       }}