title: get child state in stateless component using hooks
body: <h1>README:</h1>
  
  <p>Hi! I'm new to using React, and even newer to using hooks so please correct me if my verbiage is incorrect. In fact, I was struggling to even google my issue/come up with a title for this post - how would I best put this problem into words?</p>
  
  <hr>
  
  <h1>Question :</h1>
  
  <p>I have a root component which contains a table in its state, and I'm using <code>Material UI</code> and <code>react-csv</code> to create a NavBar with a save button that can save the table. Material UI makes use of hooks; I know if my NavBar component was stateful I could write <code>data={this.props.table}</code> to get the table, but I was wondering how I would download the table given the current framework? Is it possible?</p>
  
  <p>CodePen: <a href="https://codesandbox.io/embed/old-dust-88mrp" rel="nofollow noreferrer">https://codesandbox.io/embed/old-dust-88mrp</a></p>
  
  <h1>Root Component:</h1>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  
  import NavBar from "./NavBar";
  import "./styles.css";
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        table: "this is a table"
      };
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;NavBar /&gt;
          &lt;div&gt;{this.state.table}&lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));
  </code></pre>
  
  <h1>NavBar:</h1>
  
  <p>[I tried to simplify code as much as possible!]</p>
  
  <pre><code>import React from "react";
  import { withStyles } from "@material-ui/core/styles";
  import AppBar from "@material-ui/core/AppBar";
  import Toolbar from "@material-ui/core/Toolbar";
  import IconButton from "@material-ui/core/IconButton";
  import Menu from "@material-ui/core/Menu";
  import MenuItem from "@material-ui/core/MenuItem";
  import ListItemText from "@material-ui/core/ListItemText";
  import SaveIcon from "@material-ui/icons/Save";
  import Tooltip from "@material-ui/core/Tooltip";
  import { CSVLink } from "react-csv";
  
  const StyledMenu = withStyles({
    paper: {
      border: "1px solid #d3d4d5"
    }
  })(props =&gt; (
    &lt;Menu
      elevation={0}
      getContentAnchorEl={null}
      anchorOrigin={{
        vertical: "bottom",
        horizontal: "center"
      }}
      transformOrigin={{
        vertical: "top",
        horizontal: "center"
      }}
      {...props}
    /&gt;
  ));
  
  const StyledMenuItem = withStyles(theme =&gt; ({
    root: {
      "&amp;:focus": {
        backgroundColor: theme.palette.primary.main,
        "&amp; .MuiListItemIcon-root, &amp; .MuiListItemText-primary": {
          color: theme.palette.common.white
        }
      }
    }
  }))(MenuItem);
  
  export default function PrimarySearchAppBar() {
    const [anchorEl, setAnchorEl] = React.useState(null);
  
    const handleClick = event =&gt; {
      setAnchorEl(event.currentTarget);
    };
  
    const handleClose = () =&gt; {
      setAnchorEl(null);
    };
  
    return (
      &lt;div&gt;
        &lt;AppBar position="static"&gt;
          &lt;Toolbar&gt;
            &lt;div&gt;
              &lt;Tooltip disableFocusListener title="Save"&gt;
                &lt;IconButton size="medium" onClick={handleClick} color="inherit"&gt;
                  &lt;SaveIcon /&gt;
                &lt;/IconButton&gt;
              &lt;/Tooltip&gt;
              &lt;StyledMenu
                id="customized-menu"
                anchorEl={anchorEl}
                keepMounted
                open={Boolean(anchorEl)}
                onClose={handleClose}
              &gt;
                &lt;StyledMenuItem&gt;
                  {/* In stateful components I could put this.props.table here, 
            but how does this translate to a stateless component? */}
                  &lt;CSVLink data={"this is a test"}&gt;
                    &lt;ListItemText primary="Data" /&gt;
                  &lt;/CSVLink&gt;
                &lt;/StyledMenuItem&gt;
              &lt;/StyledMenu&gt;
            &lt;/div&gt;
          &lt;/Toolbar&gt;
        &lt;/AppBar&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>Thanks for any advice/help!!</p>