У меня есть компонент ProfileDetails
, который имеет функцию переключения для переключения дополнительной информации в профиле. Я импортирую ProfileDetails
в компонент ProfileTable
и пытаюсь передать isOpen
с ProfileDetails
. Затем сделать троичный оператор с условием isOpen. Я получаю, что isOpen не определено при этом
ProfileDetails:
function ProfileDetails() {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => {
setIsOpen(!isOpen);
};
return (
<>
<Button>
<ArrowForwardIosIcon
size="small"
onClick={toggle}></ArrowForwardIosIcon>{" "}
</Button>
<Slider open={isOpen} />
</>
);
}
ProfileTable:
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) => {
return (
<Button size="small" onClick={() => {}}>
{value}
</Button>
);
}
}
},
{
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) => {
return <ProfileDetails isOpen={isOpen} />;
}
}
}
];
const options = {
search: false,
print: false,
download: false,
selectableRows: "multiple",
expandableRows: false
};
return isOpen ? (
<DataTable
title="Shifts to be Approved"
data={details}
columns={drawerColumns}
options={options}
/>
) : (
<DataTable
title="Shifts to be Approved"
data={details}
columns={columns}
options={options}
/>
);
}
export default withStyles(styles)(ProfileTable);