I have a vertical tab and Next and Back buttons like in my react application. i want to move forward and backward tab using button click like stepper. if i click "next button" move to next tab. and the same if i click "back button" move to back tab.
and additionally, how to get data from this all tabs?
here is my tried code..
import React from "react";
import { useState } from "react";
export default function Products() {
const [value, setValue] = React.useState(0);
//Next tab button
function getSteps() {
return ["Shirt", "Hoodies", "Jeans", "Inner wear"];
}
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
const handleReset = () => {
setActiveStep(0);
};
const handleChange = (event, newValue) => {
setValue(newValue);
};
<Tabs
orientation="vertical"
variant="scrollable"
value={value}
onChange={handleChange}
aria-label="Vertical tabs"
activeStep={activeStep}
>
<Tab label="Shirt" {...a11yProps(0)} />
<Tab label="Hoodies" {...a11yProps(1)} />
<Tab label="Jeans" {...a11yProps(2)} />
<Tab label="Inner wear" {...a11yProps(3)} />
</Tabs>
<Form>
<TabPanel value={value} index={0}>Tab 1</TabPanel>
<TabPanel value={value} index={1}>Tab 2</TabPanel>
<TabPanel value={value} index={2}>Tab 3</TabPanel>
<TabPanel value={value} index={3}>Tab 4</TabPanel>
</Form>
{/* NEXT & SAVE BUTTONS */}
<Grid>
{activeStep === steps.length ? (
<div>
<Typography className={classes.instructions}>
Saved Successfully!
</Typography>
<Button
onClick={handleReset}
>
Reset
</Button>
</div>
) : (
<div>
<Button
variant="contained"
color="secondary"
disabled={activeStep === 0}
onClick={handleBack}
>
Back
</Button>
<Button
variant="contained"
color="primary"
// onClick={handleNext}
value={value}
onClick={handleChange}
>
{/* Continue */}
{activeStep === steps.length - 1 ? "Save & Update" : "Next"}
</Button>
</div>
)}
</Grid>
}
Related
For each checkbox i need to show/hide values in a dialog.
The code for adding and removing selecteditems is working.
How can I show each input after the checkbox with React hide/show for multiple fields?
The React is correct and if the second function is removed from the JS code this will work with the first checkbox and input... but, I don't know how to write the React code for multiple fields for this React structure.
Image
Here is the code
const [selectedItems, setSelectedItems] = React.useState<any>([]);
const handleToggle = (record: any) => () => {
const currentIndex = selectedItems.indexOf(record);
const newChecked = [...selectedItems];
if (currentIndex === -1) {
newChecked.push(record);
} else {
newChecked.splice(currentIndex, 1);
}
setSelectedItems(newChecked);
};
This is view
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
PaperProps={{
style: {
width: 500,
backgroundColor: "#222",
color: "white"
}
}}
maxWidth="lg"
>
<DialogContent>
<List sx={{ width: '100%', maxWidth: 500 }}>
{expensesType.map((record: any) => {
const labelId = `checkbox-list-label-${record.id}`;
return (
<ListItem
key={record}
secondaryAction={showInput(record)}
>
<ListItemButton role={undefined} onClick={handleToggle(record)} dense>
<ListItemIcon>
<Checkbox
edge="start"
checked={selectedItems.indexOf(record) !== -1}
tabIndex={-1}
value={record.value}
disableRipple
inputProps={{ 'aria-labelledby': labelId }}
/>
</ListItemIcon>
<ListItemText id={labelId} primary={record.name} />
</ListItemButton>
</ListItem>
);
})}
</List>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button onClick={handleClose} autoFocus>
Done
</Button>
</DialogActions>
</Dialog>
Problem: Clicking a button in my material-table it opens the full screen dialog then closing the dialog, Then I am not able to click anywhere in the screen anymore. The dialog's wrapper container blocking the whole screen.
My material ui table component:
export default function MyMaterialTable() {
const columns = [
// columns here
];
const [myState, setModalState] = React.useState(false);
function modalHandleClick() {
setModalState(!myState);
}
return (
<div>
<MaterialTable
title="My Material Table"
columns={columns} data={tableData} // Retreived via api
options={{
selection: true,
filtering: true,
paging: true
}}
actions={[
{
tooltip: 'Action button that triggers the Fullscreen Dialog',
icon: () => {return(<AddBoxIcon /> )},
onClick: (evt, data) => modalHandleClick()
}
]}
/>
<MyFullScreenDialog modalState={myState} modalHandleClick={modalHandleClick} />
</div>
);
}
My Full Screen dialog component:
export default function MyFullScreenDialog (props) {
const Transition = React.forwardRef(function Transition(p, ref) {
return <Slide direction="up" ref={ref} {...p} />;
});
const handleClose = () => {
props.modalHandleClick();
};
return(
<div>
<Dialog
fullScreen
open={props.modalState}
onClose={handleClose}
TransitionComponent={Transition}
>
<AppBar sx={{ position: 'relative' }}>
<Toolbar>
<IconButton
edge="start"
color="inherit"
onClick={handleClose}
aria-label="close"
>
<CloseIcon />
</IconButton>
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
Sound
</Typography>
<Button autoFocus color="inherit" onClick={handleClose}>
save
</Button>
</Toolbar>
</AppBar>
<List>
<ListItem button>
<ListItemText primary="Phone ringtone" secondary="Titania" />
</ListItem>
<Divider />
<ListItem button>
<ListItemText
primary="Default notification ringtone"
secondary="Tethys"
/>
</ListItem>
</List>
</Dialog>
</div>
);
}
I am following these guides:
FullScreen Dialog MUI
Material Table
I think the problem is in your Transition.
Try declaring the const Transition in a global context, outside the class declaration.
In your Fullscreen component:
const Transition = React.forwardRef(function Transition(p, ref) {
return <Slide direction="up" ref={ref} {...p} />;
});
export default function MyFullScreenDialog (props) {
const handleClose = () => {
props.modalHandleClick();
};
return(
<div>
...
I am building header using material UI Tab Component but I see below error:
index.js:2178 Material-UI: The value provided to the Tabs component is invalid.
None of the Tabs' children match with [object Object].
You can provide one of the following values: 0, 1.
I tried console.log the newValue to see what value it is getting and I can see 0 and 1 while navigating through tabs.
Note : Removed Some Code for better visibility
Here is my component:
const Header = (props) => {
const { classes } = props;
const [value, setValue] = useState(0);
const [modalIsOpen, setIsOpen] = React.useState(false);
const openModal = () => {
setIsOpen(true);
};
const closeModal = () => {
setIsOpen(false);
};
const handleTabChange = (event, newValue) => {
console.log(newValue);
setValue({ newValue });
};
return (
<div>
<div className="topnav">
<img src={logo} className="logo" alt="Movies App Logo" />
<div className="topnav-right">
<Button variant="contained" color="default" onClick={openModal}>
Login
</Button>
</div>
<div className="topnav-right">
<Button variant="contained" color="default">
Logout
</Button>
</div>
</div>
<Modal
ariaHideApp={false}
isOpen={modalIsOpen}
onRequestClose={closeModal}
contentLabel="Login"
aria-labelledby="Modal"
aria-describedby="Modal for Login and Registration"
style={customStyles}
>
<Paper className={classes.Paper}>
<CardContent>
<Tabs
className="tabs"
value={value}
onChange={handleTabChange}
centered
>
<Tab label="Login" />
<Tab label="Register" />
</Tabs>
{value === 0 && (
<div>
<FormControl required>
<InputLabel htmlFor="username" className={classes.inputLable}>
Username
</InputLabel>
<Input
className={classes.Input}
id="username"
type="text"
username={username}
onChange={usernameChangeHandler}
/>
<FormHelperText>
<span className="red">required</span>
</FormHelperText>
</FormControl>
<br />
<br />
<FormControl required>
<InputLabel
htmlFor="loginPassword"
className={classes.inputLable}
>
Password
</InputLabel>
<Input
className={classes.Input}
id="loginPassword"
type="password"
password={password}
onChange={passwordChangeHandler}
/>
<FormHelperText>
<span className="red">required</span>
</FormHelperText>
</FormControl>
<br />
<br />
{loggedIn === true && (
<FormControl>
<span className="success-text">Login Successful!</span>
</FormControl>
)}
<br />
<br />
<Button
variant="contained"
color="primary"
onClick={loginHandler}
>
LOGIN
</Button>
</div>
)}
{value === 1 && (
<div>
<h1>something</h2>
</div>
)}
</CardContent>
</Paper>
</Modal>
</div>
);
};
export default withStyles(styles)(Header);
For some reason you enclosed the value in an object (curly braces syntax).
Replace setValue({ newValue }) with setValue(newValue).
I am trying to show and hide the 2nd tab programmatically yet when I click on the 3rd tab I see the content of the 2nd tab.
Providing my code snippet and sandbox below
Can someone please help?
https://codesandbox.io/s/material-demo-8je9d
export default function SimpleTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const [Tab2Visible] = useState(false);
useEffect((newValue) => {
// const { user } = props;
console.log("useEffect newValue--->", newValue);
}, []);
const handleChange = (event, newValue) => {
console.log("newValue--->", newValue);
setValue(newValue);
};
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs
value={value}
onChange={handleChange}
aria-label="simple tabs example"
>
<Tab label="Item One" {...a11yProps(0)} />
{Tab2Visible === false ? (
""
) : (
<Tab label="Item Two" {...a11yProps(1)} />
)}
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
Item One
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>
</div>
);
}
If you do not provide any value property to the Tab component, MaterialUI defaults it to the index of the rendered items. Since only two Tab elements are rendered, the handleChange function gives value as 1 for Tab item 3.
Adding an explicit value property will work the way you want it to
<Tabs
value={value}
onChange={handleChange}
aria-label="simple tabs example"
>
<Tab label="Item One" value={0} {...a11yProps(0)} />
{Tab2Visible === false ? (
""
) : (
<Tab label="Item Two" value={1} {...a11yProps(1)} />
)}
<Tab label="Item Three" value={2} {...a11yProps(2)} />
</Tabs>
Working DEMO
Im using materialUI to click a menu item that then opens a dialog box(child component) however after the dialogbox opens it wont seem to close and wont update the data for noticeModal. There are not any errors being thrown and i belive it has to do with using useEffect to setNoticeModal(props.open) for the initial state. Ive tried removing the useEffect() and throwing props.open into the default useDate() for the noticeModal however upon doing that then my dialogbox wont open anymore at all. What am i over looking here?
holidaySettings.js
...
const [dialogOpen, setDialogOpen] = React.useState(false);
const handleDialogOpen = (dataElement) => {
setDialogData(dataElement);
setDialogOpen(true);
setOpen(false);
}
...
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
<MenuItem onClick={handleDialogOpen}>Add Holiday</MenuItem>
</MenuList>
</ClickAwayListener>
...
<div className="card-body">
<div className="row">
<div className="text-left col-12">
<Styles>
<Table columns={columns} data={data} />
<HolidayDialog open={dialogOpen} onClose={handleDialogClose} data={dialogData}/>
</Styles>
</div>
</div>
</div>
...
holidayDialog.js
const HolidayDialog = (props) => {
const [noticeModal, setNoticeModal] = useState(false);
const [selectedDate, setSelectedDate] = useState(new Date());
const [holidayData, setHolidayData] = useState(props.data);
useEffect(() => {
setNoticeModal(props.open)
});
const handleDateChange = (date) => {
setSelectedDate(date);
};
const handleClose = () => {
setNoticeModal(false);
console.log(noticeModal);
};
const handleChange = (e) => {
const { name, checked } = e.target;
setHolidayData((prevState) => ({ ...prevState, [name]: checked }));
};
const updateValues = (e) => {
const { name, value } = e.target;
setHolidayData((prevState) => ({ ...prevState, [name]: value }));
}
return (
<Dialog
open={noticeModal}
TransitionComponent={Transition}
keepMounted
onClose={handleClose}
aria-labelledby="notice-modal-slide-title"
aria-describedby="notice-modal-slide-description"
>
<DialogTitle id="customized-dialog-title" onClose={handleClose}>
{holidayData.HolidayName ? holidayData.HolidayName : 'Create New Holiday'}
</DialogTitle>
<DialogContent dividers>
<form noValidate autoComplete="off">
<div className="row">
<div className="col">
<TextField required name="HolidayName" id="outlined-basic" label="Holiday Name" variant="outlined" onChange={updateValues} value={holidayData.HolidayName || ''}/>
</div>
<div className="col">
<TextField id="outlined-basic" name="Branch" label="Branch" variant="outlined" onChange={updateValues} value={holidayData.Branch || 'ALL'}/>
</div>
</div>
<div className="row mt-3">
<div className="col">
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
disableToolbar
variant="inline"
format="MM/dd/yyyy"
margin="normal"
id="date-picker-inline"
label="Date picker inline"
value={selectedDate}
onChange={handleDateChange}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
/>
</MuiPickersUtilsProvider>
</div>
<div className="col">
<TextField id="outlined-basic" name="Hours" label="Hours" variant="outlined" onChange={updateValues} value={holidayData.Hours || 'Closed'}/>
</div>
</div>
<div className="row mt-3">
<div className="col d-flex flex-column">
<FormControlLabel
control={
<Checkbox
checked={holidayData.Web || false}
value={holidayData.Web}
onChange={handleChange}
name="Web"
color="primary"
/>
}
label="Show on Web?"
/>
<FormControlLabel
control={
<Checkbox
checked={holidayData.CoOp || false}
value={holidayData.CoOp}
onChange={handleChange}
name="CoOp"
color="primary"
/>
}
label="CoOp Holiday?"
/>
</div>
<div className="col d-flex flex-column">
<FormControlLabel
control={
<Checkbox
checked={holidayData.Phone || false}
value={holidayData.Phone}
onChange={handleChange}
name="Phone"
color="primary"
/>
}
label="Use in IVR?"
/>
<FormControlLabel
control={
<Checkbox
checked={holidayData.Active || true}
value={holidayData.Active}
onChange={handleChange}
disabled
name="Active"
color="primary"
/>
}
label="Active"
/>
</div>
</div>
</form>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleClose} color="default">
Cancel
</Button>
<Button autoFocus onClick={handleClose} color="primary">
Create Holiday
</Button>
</DialogActions>
</Dialog>
)
}
export default HolidayDialog;
Could you try this?
I am assuming props.onClose is making dialogOpen to false on parent(holidaySettings)
const handleClose = () => {
props.onClose()
};
If props.onClose is not making dialogOpen to false on parent(holidaySettings).You can add close attribute which sets dialogOpen to false.
<HolidayDialog open={dialogOpen} close={()=>setDialogOpen(false);} onClose={handleDialogClose} data={dialogData}/>
const handleClose = () => {
props.close()
};
And passing props.open to Dialog
<Dialog
open={props.open}
/>
You are not providing any dependency to useEffect so it runs on every re-render. In your useEffect you are toggling the modal and hence the issue.
useEffect(() => {
setNoticeModal(props.open)
});//<---- issue - missing dependency
Solution - pass dependency as props.open. This makes the useEffect to run only when props.open is changed.
useEffect(() => {
setNoticeModal(props.open)
}, [props.open]); //<----- props.open
Inside the useEffect, you are resetting the noticeModal value to props.open which i believe is true?
I believe what you are trying to do is set the initial value of noticeModal.
Try changing to the code below and remove the useEffect
const [noticeModal, setNoticeModal] = useState(props.open);