get child state in stateless component using hooks

Question

README:

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?

---

Question :

I have a root component which contains a table in its state, and I'm using Material UI and react-csv 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 data={this.props.table} to get the table, but I was wondering how I would download the table given the current framework? Is it possible?

CodePen: https://codesandbox.io/embed/old-dust-88mrp

Root Component:

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 (
      <div>
        <NavBar />
        <div>{this.state.table}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

NavBar:

[I tried to simplify code as much as possible!]

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 => (
  <Menu
    elevation={0}
    getContentAnchorEl={null}
    anchorOrigin={{
      vertical: "bottom",
      horizontal: "center"
    }}
    transformOrigin={{
      vertical: "top",
      horizontal: "center"
    }}
    {...props}
  />
));

const StyledMenuItem = withStyles(theme => ({
  root: {
    "&:focus": {
      backgroundColor: theme.palette.primary.main,
      "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
        color: theme.palette.common.white
      }
    }
  }
}))(MenuItem);

export default function PrimarySearchAppBar() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <AppBar position="static">
        <Toolbar>
          <div>
            <Tooltip disableFocusListener title="Save">
              <IconButton size="medium" onClick={handleClick} color="inherit">
                <SaveIcon />
              </IconButton>
            </Tooltip>
            <StyledMenu
              id="customized-menu"
              anchorEl={anchorEl}
              keepMounted
              open={Boolean(anchorEl)}
              onClose={handleClose}
            >
              <StyledMenuItem>
                {/* In stateful components I could put this.props.table here, 
          but how does this translate to a stateless component? */}
                <CSVLink data={"this is a test"}>
                  <ListItemText primary="Data" />
                </CSVLink>
              </StyledMenuItem>
            </StyledMenu>
          </div>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Thanks for any advice/help!!

Answer 1

<NavBar table={this.state.table}/>


export default function PrimarySearchAppBar({table}) {
    <CSVLink data={table}>

}