title: Passing props from component to componet using react hooks
body: <p>I have a component <code>ProfileDetails</code> that has a toggle function to toggle additional information on a profile. I'm importing <code>ProfileDetails</code> to a component <code>ProfileTable</code> and trying to pass <code>isOpen</code> with <code>ProfileDetails</code>. To then do a ternary operator with the condition isOpen. I am getting isOpen is undefined when doing so </p>
  
  <p>ProfileDetails :</p>
  
  <pre><code>function ProfileDetails() {
      const [isOpen, setIsOpen] = useState(false);
  
      const toggle = () =&gt; {
          setIsOpen(!isOpen);
      };
  
      return (
          &lt;&gt;
              &lt;Button&gt;
                  &lt;ArrowForwardIosIcon
                      size="small"
                      onClick={toggle}&gt;&lt;/ArrowForwardIosIcon&gt;{" "}
              &lt;/Button&gt;
              &lt;Slider open={isOpen} /&gt;
          &lt;/&gt;
      );
  }
  </code></pre>
  
  <p>ProfileTable: </p>
  
  <pre><code>import React, { useState, Fragment } from "react";
  import format from "date-fns/format";
  import Button from "@material-ui/core/Button";
  import { withStyles } from "@material-ui/core/styles";
  import DataTable from "../DataTable";
  import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos";
  import ProfileDetails from "./ProfileDetails ";
  
  
  
  
  function ProfileTable(props, isOpen) {
      const { classes } = props;
  
  
  
      const drawerColumns = [
          {
              name: "Name",
              label: "Name",
              options: {
                  filter: true,
                  sort: false,
                  customBodyRender: (value, tableMeta) =&gt; {
                      return (
                          &lt;Button size="small" onClick={() =&gt; {}}&gt;
                              {value}
                          &lt;/Button&gt;
                      );
                  }
              }
          },
          {
              name: "Address",
              label: "Address",
              options: {
                  filter: false,
                  sort: true
              }
          },
          {
              name: "Zip",
              label: "Zip",
              options: {
                  filter: false,
                  sort: true
              }
          },
          {
              name: "",
              label: "",
              options: {
                  filter: false,
                  sort: false,
                  customBodyRender: (value, tableMeta) =&gt; {
                      return &lt;ProfileDetails isOpen={isOpen} /&gt;;
                  }
              }
          }
      ];
  
      const options = {
  
          search: false,
          print: false,
          download: false,
          selectableRows: "multiple",
          expandableRows: false
      };
  
      return isOpen ? (
          &lt;DataTable
              title="Shifts to be Approved"
              data={details}
              columns={drawerColumns}
              options={options}
          /&gt;
      ) : (
          &lt;DataTable
              title="Shifts to be Approved"
              data={details}
              columns={columns}
              options={options}
          /&gt;
      );
  }
  
  export default withStyles(styles)(ProfileTable);
  
  </code></pre>