We Keep Coding

ReactJS: Make Material UI Dialog Box Pop Up Full Screen

When I click on a button, I have a Material UI dialog box pop up successfully (yay!). Now I just want it to be full screen rather than only a small portion of the screen. I am trying to follow along in the Material UI API for the dialog box, but my box is not appearing full screen. Is there some sort of disconnect that I am missing here? Thanks a lot in advance (sorry if this is a noob question).
import React from 'react';
import { makeStyles } from '#material-ui/styles';
import Button from '#material-ui/core/Button';
import TextField from '#material-ui/core/TextField';
import Dialog from '#material-ui/core/Dialog';
import DialogActions from '#material-ui/core/DialogActions';
import DialogContent from '#material-ui/core/DialogContent';
import DialogContentText from '#material-ui/core/DialogContentText';
import DialogTitle from '#material-ui/core/DialogTitle';
import PhotoScrolling from './PhotoScrolling';
/* const useStyles = makeStyles({
imageSlider: {
backgroundColor: 'yellow',
color: 'black',
width: 400,
},
}); */
export default function FormDialog() {
// const classes = useStyles();
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open form dialog
</Button>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title"
fullScreen={true}
fullWidth={true}
>Section Title</DialogTitle>
<PhotoScrolling></PhotoScrolling>
<DialogActions>
<Button onClick={handleClose} color="primary">
Close
</Button>
</DialogActions>
</Dialog>
</div>
);
}

Try calling fullscreen={fullscreen} inside <Dialog fullscreen={fullscreen}/> it will work fine.
You are making mistake by calling it inside <DialogTitle/>.
Hope this will work.
return
(
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open form dialog
</Button>
<Dialog
open={open}
onClose={handleClose}
fullScreen={true}//Here you need to add the function
aria-labelledby="form-dialog-title"
>
<DialogTitle id="form-dialog-title"
fullWidth={true}
>Section Title</DialogTitle>
<PhotoScrolling></PhotoScrolling>
<DialogActions>
<Button onClick={handleClose} color="primary">
Close
</Button>
</DialogActions>
</Dialog>
</div>
)

Material UI dialog changes style of other components when opening

I have this Dialog component which I am showing from a button on my AppBar component.
Whenever I open that dialog, the margin on my navbar elements changes and I cant figure why. Upon inspecting the html using the dev tools nothing changes, no css changes on either of the elements on my components.
Any suggestions on how to debug this properly or where in the MUI docs to look is helpfull.
Edit: class .MuiTouchRipple-root is attached to my AddCircle component.
import React from 'react';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import Box from '#mui/material/Box';
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
import { useState } from 'react';
import SelectInvoiceDialog from './components/SelectInvoiceDialog';
import ProcessInvoice from './pages/ProcessInvoice';
function App() {
const [open, setOpen] = useState(false);
const openSelectDialog = () => setOpen(true);
const closeSelectDialog = () => setOpen(false);
return (
<Router>
<Box>
<Navbar openDialog={openSelectDialog}/>
<Switch>
<Route exact path="/process">
<ProcessInvoice />
</Route>
<Route exact path="/">
<Home />
</Route>
</Switch>
</Box>
<SelectInvoiceDialog open={open} closeAction={closeSelectDialog}/>
</Router>
);
}
export default App;
import React from "react";
import AppBar from '#mui/material/AppBar';
import Box from '#mui/material/Box';
import Toolbar from '#mui/material/Toolbar';
import Typography from '#mui/material/Typography';
import AddCircle from '#material-ui/icons/AddCircle'
import IconButton from '#mui/material/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
import { makeStyles, createStyles } from "#material-ui/core";
const useStyles = makeStyles((theme) => createStyles({
navBarStyle: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
display: 'flex',
flexDirection: 'row',
color: 'white'
}
}));
export default function Navbar ({ openDialog }) {
const classes = useStyles();
return (
<Box>
<AppBar position="static">
<Toolbar className={classes.navBarStyle}>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>Invoice processor</Typography>
<IconButton
size="large"
color="inherit"
onClick={openDialog}
>
<AddCircle />
</IconButton>
</Toolbar>
</AppBar>
</Box>
);
}
import Button from '#material-ui/core/Button';
import Dialog from '#material-ui/core/Dialog';
import DialogActions from '#material-ui/core/DialogActions';
import DialogContent from '#material-ui/core/DialogContent';
import { DialogTitle, Select, MenuItem, FormControl, InputLabel, Box, TextField, Typography} from "#mui/material";
import { Link } from 'react-router-dom'
import { useState } from 'react';
export default function SelectInvoiceDialog ({ open, closeAction }) {
const [filePath, setFilePath] = useState('');
const [selection, setSelection] = useState('');
const handleChange = (e) => setSelection(e.target.value)
return (
<Dialog
open={open}
onClose={closeAction}
fullWidth
disableEnforceFocus
>
<DialogTitle>Process Invoice</DialogTitle>
<DialogContent>
<FormControl fullWidth>
<InputLabel id="selectTemplateLabel">Template</InputLabel>
<Select
labelId="selectTemplateLabel"
id="selectTemplate"
value={selection}
onChange={handleChange}
label="Template"
>
<MenuItem value={'DELL'}>DELL</MenuItem>
<MenuItem value={'AI'}>Automatic AI</MenuItem>
<MenuItem value={'30'}>Thirty</MenuItem>
</Select>
</FormControl>
<FormControl fullWidth>
<TextField label="Debtor Number"/>
</FormControl>
<FormControl>
<Typography>{filePath ? 'File name:' : ''} {filePath}</Typography>
<Button
variant="contained"
component="label"
size="large"
>
SELECT FILE
<input type="file" hidden onChange={(e) => setFilePath(e.target.files[0].name)}/>
</Button>
</FormControl>
<DialogActions>
<Button
variant="contained"
onClick={() => {
closeAction();
setFilePath('');
}}
component={Link}
to={'/process'}
>Process</Button>
</DialogActions>
</DialogContent>
</Dialog>
);
}

There is a good chance it is due to your mixing of #mui and #material-ui.

I got the fix by adding some css to the html body.
body {
margin: 0;
padding: 0;
}

React: How to extract values from Modals?

I have a Chakra UI Modal which opens up onClick of a button. I want to be able to extract the values that a user puts into the inputs/radio buttons when they close the Modal. The Modal class and the Modal/Button render is shown below. Since the input and radio buttons are defined within the Modal class, is it possible to get their final values onClose?
Modal.tsx
import React from 'react'
import {
Modal as ChakraModal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
RadioGroup,
Stack,
Radio,
VStack
} from "#chakra-ui/react"
import Button from './Button'
import Input from './Input'
type Props = { isOpen : boolean } & { onClose : () => void} & { label : string }
const Modal = ({ label, isOpen, onClose, ...rest }: Props) => (
<ChakraModal {...rest} isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>{label}</ModalHeader>
<ModalCloseButton />
<ModalBody>
<VStack spacing={4}>
<RadioGroup>
<Stack direction="row">
<Radio value="1">Annually</Radio>
<Radio value="2">Semi-Annual</Radio>
<Radio value="3">Quarterly</Radio>
<Radio value="4">Monthly</Radio>
</Stack>
</RadioGroup>
<Input
label="Custom Interest rate"
name="Custom Interest rate"
/>
</VStack>
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Save
</Button>
</ModalFooter>
</ModalContent>
</ChakraModal>
)
export default Modal
Render
<Button onClick={onOpen}> Settings </Button>
<Modal
label="Custom Settings"
isOpen={isOpen}
onClose={onClose}
/>

You should probably send a state as the modal's prop.
const [state, setState] = React.useState();
<Modal
label="Custom Settings"
isOpen={isOpen}
onClose={onClose}
onChange={setState}
/>
To get the type of setState, hover over the variable and you can see the type definition.

React Component Re-Renders when updating input using React Hooks

I'm working on a React Project. I'm building a form with about 5 fields in it. I've used React Hooks to manage the state of the updates however when I enter in an input into the field. I can see the component re-render each time I enter a key stroke. the re-render is causing issues because it sets a state of a form field back to empty. Any help would be greatly appreciated!
Thanks,
Link to a gif of the re-render on keystroke can be found here: https://gph.is/g/ZxDqzmN
Link to clearing the form field: https://gph.is/g/4LjmDpd
import React, { useState } from "react";
import styled from "styled-components";
import {
Button,
CardContent,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Card as MuiCard,
Paper as MuiPaper,
TextField,
} from "#material-ui/core";
import { spacing } from "#material-ui/system";
export default function EmployeeFormDialog() {
const [open, setDialog] = useState(null);
const [carName, setCarName] = useState([""]);
const onSubmit = (data, event) => {
event.preventDefault();
console.log(data);
setDialog(false);
};
console.log("re-render");
const Card = styled(MuiCard)(spacing);
const Paper = styled(MuiPaper)(spacing);
return (
<Card mb={6}>
<CardContent>
<Paper mt={4}>
<div>
<Button variant="contained" color="primary" onClick={() => setDialog(true)}>
Add New Cars
</Button>
<Dialog open={open} aria-labelledby="form-dialog-title" disableEnforceFocus="true">
<form onSubmit={onSubmit}>
<DialogTitle id="form-dialog-title">Add New Car</DialogTitle>
<DialogContent>
<DialogContentText>To add new car</DialogContentText>
<TextField
onChange={(e) => setCarName(e.target.value)}
defaultValue={carName}
name="carName"
margin="dense"
id="carName"
label="Car Name"
type="text"
fullWidth
/>
<TextField
autoFocus
name="carYear"
margin="dense"
id="carYear"
label="Car Year"
type="text"
fullWidth
/>
</DialogContent>
<DialogActions>
<Button type="button" onClick={() => setDialog(false)} color="primary">
Cancel
</Button>
<Button type="submit" color="primary">
Add Car
</Button>
</DialogActions>
</form>
</Dialog>
</div>
</Paper>
</CardContent>
</Card>
);
}

How can I get this React Bootstrap Modal Working properly?

I have a exercise I am working on/attempting to replicate and I am trying to add a modal button to the file. I have the button and the modal from React Bootstrap, however, I am unable to get the actual modal to show up. I was using the documentation from React-Bootstrap but getting the actual modal to come up is not working, I have tried to import the various modals but to no avail, am I missing something in my code?
import React from 'react';
import { Modal, Form, FormControl, Button, ButtonToolbar, InputGroup } from 'react-bootstrap';
import { connect } from 'react-redux';
import { addItem } from '../actions/itemActions';
function ItemModal(props) {
return (
<div>
<Button
variant="dark"
style={{marginBottom: '2em'}}
>Add Item
</Button>
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Add to Shopping List
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Label for="item">Item</Form.Label>
<InputGroup className="mb-3">
<FormControl
type="text"
name="name"
id="item"
aria-label="Add Shopping Item"
aria-describedby="basic-addon2"
/>
<InputGroup.Append>
<Button onClick={props.onHide} variant="outline-dark">Add</Button>
</InputGroup.Append>
</InputGroup>
</Form>
</Modal.Body>
</Modal>
</div>
);
}
function App() {
const [modalShow, setModalShow] = React.useState(false);
return (
<ButtonToolbar>
<Button variant="dark" onClick={() => setModalShow(true)}>
Add Item
</Button>
<ItemModal
show={modalShow}
onHide={() => setModalShow(false)}
/>
</ButtonToolbar>
);
}
export default connect()(ItemModal);
I do have this extra bit of code that I though would function to open the modal but I don't think it works with this version of Bootstrap?
state = {
modal: false,
name: ''
}
toggle = () => {
this.setState({
modal: !this.state.modal
});
};
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
}

From your code snippet, I found an issue.
You have 2 component's in a single file, App and ItemModal. From which App component is your base / parent component and ItemModal is your child component.
But you are exporting child compoennt,
export default connect()(ItemModal);
You should export the parent component,
export default connect()(App);