I am working with React and am very new to it. I have a page that has a bunch of FontIcons. I would like the user to click on an icon and have a dialog pop up. I found information on the dialog piece, http://www.material-ui.com/#/components/dialog. I have not found anything on how to make the onclick action render the dialog component.
I know I need to add something in here..
<a style={{position: 'absolute', bottom: 0, right: 0, cursor: 'pointer'}} onTouchTap={() => manageBookmark(parsedParams, this.props.documentRdxDoc.acm, this.props.documentRdxDoc.docTitle)}>
<Tooltip label='Manage Bookmark' position='right'>
<FontIcon className='material-icons' style={{color:
appConfig.globalFontColor}} tooltip="Notifications">star</FontIcon>
</Tooltip>
</a>
You need to create the dialog component itself and then show it when the FontIcon is clicked (using the onClick property).
The dialog state can be tracked using the component state object and modified via handler methods.
Here's an example based on the documentation site:
export default class DialogButtonSample extends React.Component {
state = {
open: false,
};
handleOpen = () => {
this.setState({open: true});
};
handleClose = () => {
this.setState({open: false});
};
render() {
const actions = [
<FlatButton
label="Cancel"
primary={true}
onClick={this.handleClose}
/>,
<FlatButton
label="Submit"
primary={true}
disabled={true}
onClick={this.handleClose}
/>,
];
return (
<div>
<a style={{position: 'absolute', bottom: 0, right: 0, cursor: 'pointer'}} onTouchTap={() => manageBookmark(parsedParams, this.props.documentRdxDoc.acm, this.props.documentRdxDoc.docTitle)}>
<Tooltip label='Manage Bookmark' position='right'>
<FontIcon className='material-icons' style={{color: appConfig.globalFontColor}} tooltip="Notifications" onClick={this.handleOpen}>star</FontIcon>
</Tooltip>
<Dialog
title="Dialog With Actions"
actions={actions}
modal={false}
open={this.state.open}
onRequestClose={this.handleClose}
>
</a>
</div>
);
}
}
Related
I have simulate my issue in codesandbox: https://codesandbox.io/s/trusting-babbage-ovj2we?file=/src/App.js
I have create a nested modal, when the parent modal is opened, there is a button lead to the child modal. I have passed the useState of the parent modal to the child modal as a prop, I want to close the parent model when the child modal is opened, however, both die when the button was clicked.
I have reviewed my code many times but have no idea what is causing this.
You can't do this, if the parent modal dies child will also die but you can do this by not wrapping the child modal inside the parent modal see below working code for your question
import * as React from "react";
import Box from "#mui/material/Box";
import Modal from "#mui/material/Modal";
import Button from "#mui/material/Button";
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "background.paper",
border: "2px solid #000",
boxShadow: 24,
pt: 2,
px: 4,
pb: 3
};
export default function NestedModal() {
const [open, setOpen] = React.useState(false);
const [openChild, setChildOpen] = React.useState(false);
const toggleOpenParent = () => {
setOpen(!open);
};
const toggleChild = () => {
setChildOpen(!openChild);
};
return (
<div>
<Button onClick={toggleOpenParent}>Open modal</Button>
<Modal open={open} onClose={toggleOpenParent}>
<Box sx={{ ...style, width: 400 }}>
<Button
onClick={() => {
toggleChild();
toggleOpenParent()
}}
>
Open Child Modal
</Button>
</Box>
</Modal>
<React.Fragment>
<Modal hideBackdrop open={openChild} onClose={toggleChild}>
<Box sx={{ ...style, width: 200 }}>
<Button onClick={toggleChild}>Close Child Modal</Button>
</Box>
</Modal>
</React.Fragment>
</div>
);
}
I have a react component where I map through a list of clients and display each client in a card.
return (
<div className='VolunteerClientsTab'>
{volunteerClients && volunteerClients.map((client) => (
<React.Fragment key={client.id}>
<div className='VolunteerClientsTab__card'>
<Avatar style={{ alignSelf: 'center', marginTop: '.5rem' }}>{client.first_name[0]}{client.last_name[0]}</Avatar>
<h2>{client.first_name} {client.last_name}</h2>
<h4>Details</h4>
<p><AiOutlineMail style={iconStyles} /> {client.email}</p>
<p><AiOutlinePhone style={iconStyles} /> {formatPhoneNumber(client.contact_number)}</p>
<h4 style={{ marginTop: '1rem' }}>Actions</h4>
<p onClick={handleOpenClientNeedsModal} className='hover-underline'><BiDonateHeart style={iconStyles} />View Needs</p>
<p className='hover-underline'><HiOutlineDocumentReport style={iconStyles} />Write Report</p>
<p className='hover-underline'><FiVideo style={iconStyles} />Contact Client</p>
</div>
<ClientNeeds open={openClientNeedsModal} handleClose={handleCloseClientNeedsModal} client={client} />
</React.Fragment>
))}
</div>
)
};
ClientNeeds is a component that renders an MUI modal to display additional client information. I am passing it the client object within the loop but when I open the modal only the client of the last index in the volunteerClients array was passed to all the modal components. Does anyone have any idea why this is happening?
ClientNeeds component
import React from 'react';
import Box from '#mui/material/Box';
import Modal from '#mui/material/Modal';
import PropTypes from 'prop-types';
const style = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
};
const ClientNeeds = ({ open, handleClose, client }) => {
return (
<div>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<h2>{client.email}</h2>
</Box>
</Modal>
</div>
)
};
ClientNeeds.propTypes = {
open: PropTypes.bool,
handleClose: PropTypes.func,
client: PropTypes.object
};
export default ClientNeeds;
MY SOLUTION
Passing the client onClick to an additional global state object and passing that state object to the modal,
const [selectedClient, setSelectedClient] = useState(null)
also only rendering the clientNeedsModal is there is an object in that state.
<div className='VolunteerClientsTab'>
{volunteerClients && volunteerClients.map((client) => (
<React.Fragment key={client.id}>
<div className='VolunteerClientsTab__card'>
<Avatar style={{ alignSelf: 'center', marginTop: '.5rem' }}>{client.first_name[0]}{client.last_name[0]}</Avatar>
<h2>{client.first_name} {client.last_name}</h2>
<h4>Details</h4>
<p><AiOutlineMail style={iconStyles} /> {client.email}</p>
<p><AiOutlinePhone style={iconStyles} /> {formatPhoneNumber(client.contact_number)}</p>
<h4 style={{ marginTop: '1rem' }}>Actions</h4>
<p onClick={() => handleOpenNeeds(client)} className='hover-underline'><BiDonateHeart style={iconStyles} />View Needs</p>
<p className='hover-underline'><HiOutlineDocumentReport style={iconStyles} />Write Report</p>
<p className='hover-underline'><FiVideo style={iconStyles} />Schedule Meeting</p>
</div>
{selectedClient ? (
<ClientNeeds open={openClientNeedsModal} handleClose={handleCloseClientNeedsModal} client={selectedClient} />
) : null}
</React.Fragment>
))}
</div>
const handleCloseClientNeedsModal = () => {
setSelectedClient(null)
setOpenClientNeedsModal(false);
}
const handleOpenNeeds = (client) => {
setSelectedClient(client)
handleOpenClientNeedsModal()
}
This allows me to pass any individual object within my array to the modal component as originally desired
I have two modals one is Login modal and another is Signup modal now I want to open signup modal by clicking on a button which is present in login modal, I tried many different ways but not able to achieve it, also I tried to make a signupModalSwitch with useReducer and by making different function calls but it was saying against hooks rule, I am very new to react not able to figure out how to do it. Thanks in Advance :)
modal1 ->
function LoginModal() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button
onClick={handleOpen}
variant="outlined"
className={classNames(
classes.textNeonGreen,
classes.outlinedNeonGreen,
classes.navButton
)}
classes={{ disabled: classes.disabled }}
>
<Typography noWrap>Login</Typography>
</Button>
<Modal
className={classes.modal}
open={open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={open}>
<LoginCard LoginClose={handleClose} />
</Fade>
</Modal>
</div>
);
}
function LoginCard({ LoginClose }) {
return (
<Card className={classes.modalCard}>
<span>
<button
onClick={LoginClose}
type="button"
className="close px-2 pt-2"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</span>
<CardContent className={classes.modalCardContent}>
<Typography variant="h4" className={classes.modalHeading}>
<b>Login</b>
</Typography>
<Account>
<Login />
</Account>
<div>
<Grid
container
direction="column"
justify="center"
alignItems="center"
>
<p className="mb-2 mt-4 text-center">
Don't have Account?
</p>
//###### BY CLICKING THIS BUTTON I WANT TO OPEN MY SIGNUP MODAL #######//
<button
className="btn btn-outline-success btn-block btn-md"
onClick={() => {
LoginClose();
signupModalSwitch(null,{type:'open'})
}
}
>
Signup
</button>
</Grid>
</div>
</CardContent>
</Card>
);
}
MODAL2 ->
function signupModalSwitch(state, action){
switch(action.type){
case 'open':
return { open: true }
case 'close':
return { open: false }
default:
console.log(action);
}
}
function SignupModal() {
const classes = useStyles();
const [state, dispatch] = useReducer(signupModalSwitch, { open: false })
function handleOpen() {
dispatch({type: "open"});
}
function handleClose() {
dispatch({type: "close"});
};
return (
<div>
<Button
onClick={handleOpen}
variant="outlined"
className={classNames(
classes.textNeonGreen,
classes.outlinedNeonGreen,
classes.navButton
)}
classes={{ disabled: classes.disabled }}
>
<Typography noWrap>Signup</Typography>
</Button>
<Modal
className={classes.modal}
open={state.open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={state.open}>
<SignupCard signupClose={handleClose} />
</Fade>
</Modal>
</div>
);
}
function SignupCard({ signupClose }) {
return (
<Card className={classes.modalCard}>
<span>
<button
onClick={signupClose}
type="button"
className="close px-2 pt-2"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</span>
<CardContent className={classes.modalCardContent}>
<Typography variant="h4" className={classes.modalHeading}>
<b>Signup</b>
</Typography>
<Signup />
</CardContent>
</Card>
);
}
A better way to do this would be to create a container and move all the logic to the container. Your login and sign up modals should be dumb components, i.e, do not maintain the state in these components.
In your container, keep two states, openLoginModal and openSignupModal.
const [openLoginModal, setOpenLoginModal] = useState(false)
const [openSignupModal, setOpenSignupModal] = useState(false)
You can pass these as props to your login and signup components. When you click the button in the login modal, you will need one more function that closes login modal and opens sign up modal. You can pass this as prop as well.
const onSignupButtonClick = () => {
setOpenLoginModal(false)
setOpenSignupModal(true)
}
You can conditionally render login and signup modal based on the state values.
I copied code for material-ui dialog feature for react, but couldn't figure out why this isn't working at all. Clicking the contact button doesn't even cause it to call the handleClickOpen method.
The contact button is the one that's supposed to open the dialog box, all the dialog code is copied from the docs of material-ui so I'm not sure how this couldn't be working.
export default function Banner() {
const [open, setOpen] = React.useState(false);
function handleClickOpen() {
setOpen(true);
}
function handleClose() {
setOpen(false);
}
const classes = useStyles();
return (
<Container maxWidth="lg">
<div className={classes.root}>
<Grid container spacing={7}>
<Grid item lg={6} xs={12}>
<div className={classes.title}>
<Title content="Freightage Solutions" />
<br />
<SubTitle content="A lean, modern, and efficient shipping brokerage." />
<div className={classes.buttons}>
<Button ClassName={classes.button} content="Get Started" color='white' />
<Button ClassName={classes.button} content="Contact Us" color='blue' onClick = {handleClickOpen} />
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous location data to
Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Disagree
</Button>
<Button onClick={handleClose} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
</div>
</div>
</Grid>
<Grid item lg={6} xs={12}>
<img src={Image} className={classes.image} />
</Grid>
</Grid>
</div>
</Container>
);
}
EDIT: Here is the custom button component I'm using
import React from 'react';
import Typography from '#material-ui/core/Typography';
import { styled } from '#material-ui/styles';
import createBreakpoints from "#material-ui/core/styles/createBreakpoints";
import Button from "#material-ui/core/Button"
const breakpoints = createBreakpoints({});
const CustomButton = styled(Button)({
border: '2px solid #FFFFFF',
borderRadius: 80,
height: 48,
padding: '0 20px',
textTransform: 'none',
marginBottom: '20px',
marginRight: '30px',
marginLeft: '30px',
[breakpoints.up("lg")]: {
marginLeft: '0px',
},
});
const BlueButton = styled(CustomButton)({
background: '#0071F7',
color: 'white',
'&:hover': {
background: 'white',
color: '#0071F7',
},
});
const WhiteButton = styled(CustomButton)({
background: 'white',
color: '#0071F7',
'&:hover': {
background: '#0071F7',
color: 'white',
}
});
const ButtonType = styled(Typography)({
fontFamily: 'Ubuntu',
fontWeight: 450,
});
export default class Title extends React.Component {
render (){
if(this.props.color == 'white'){
return (
<WhiteButton gutterBottom>
<ButtonType>
{this.props.content}
</ButtonType>
</WhiteButton>
)
} else{
return(
<BlueButton gutterBottom>
<ButtonType>
{this.props.content}
</ButtonType>
</BlueButton>
)
}
}
}
It would be a good idea to use the onClick-prop you provided with to your CustomButton and set it on your button.
export default class Title extends React.Component {
render () {
if(this.props.color == 'white'){
return (
<WhiteButton onClick={this.props.onClick} gutterBottom>
<ButtonType>
{this.props.content}
</ButtonType>
</WhiteButton>
)
} else{
return(
<BlueButton onClick={this.props.onClick} gutterBottom>
<ButtonType>
{this.props.content}
</ButtonType>
</BlueButton>
)
}
}
}
As per the API Doc, there is no props called content for Button instead use children like,
<Button className={classes.button} children="Get Started" style={{color:'white'}} />
<Button className={classes.button} children="Contact Us" style={{color:'blue'}} onClick = {handleClickOpen} />
Update
You are using Button name to your custom component and material-ui also have the component with same name. As you are using both in same place there is a conflict and not a error from material-ui which one to use and your functionality is not working. This is probably the problem.
Try to change your custom button component name and check if it works.
Update 2
if(this.props.color == 'white'){
return (
<WhiteButton gutterBottom>
<ButtonType>
<Button onClick={this.props.onClick}>{this.props.content}</Button> //You forgot to use Button here
</ButtonType>
</WhiteButton>
)
} else{
return(
<BlueButton gutterBottom>
<ButtonType>
<Button onClick={this.props.onClick}>{this.props.content}</Button>
</ButtonType>
</BlueButton>
)
}
you should use proper material-ui Button API(https://material-ui.com/api/button/)
<Button children="Get Started" style={{color:'white'}} />
<Button children="Contact Us" style={{color:'blue'}} onClick = {handleClickOpen} />
check this: https://codesandbox.io/s/3fl8r
I used the Material UI Dialog to make a form list. In the official case:
<Dialog
title="Dialog With Custom Width"
actions={actions}
modal={true}
open={this.state.open}
>
This dialog spans the entire width of the screen.
</Dialog>
the actions is :
const actions = [
<FlatButton
label="Cancel"
primary={true}
onTouchTap={this.handleClose}
/>,
<FlatButton
label="Submit"
primary={true}
onTouchTap={this.handleClose}
/>,
];
How can I build a form and let Dialog can submit my form data?
------------------------------------------------UPDATE-----------------------------------------------
There is another answer:
Add the attribute of type and form in the Dialog actions button:
const actions = [
<FlatButton
label="Cancel"
primary={true}
onTouchTap={this.handleClose}
/>,
<FlatButton
label="Submit"
primary={true}
onTouchTap={this.handleClose}
type="submit" //set the buttom type is submit
form="myform" //target the form which you want to sent
/>,
];
and give attribute id to the form in the dialog:
<Dialog
title="Dialog With Custom Width"
actions={actions}
modal={true}
open={this.state.open}
>
// here can put child component and the code still work even the form is in the child component
<div className="deal_form">
<form id="myform" onSubmit = {this.handleCreate} >
<TextField value={this.state.staff_number} />
</form>
</div>
</Dialog>
You can put a <form> inside the Dialog, but you must also put your {actions} inside the form, instead of the actions property. Your Submit action button should have type="submit" on it (type="reset" is also supported, and shown below).
jsFiddle: https://jsfiddle.net/14dugwp3/6/
const {
Dialog,
TextField,
FlatButton,
MuiThemeProvider,
getMuiTheme,
} = MaterialUI;
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { open: true };
this.handleClose = this._handleClose.bind(this);
}
_handleClose() {
this.setState({ open: false });
}
render() {
const actions = [
<FlatButton
type="reset"
label="Reset"
secondary={true}
style={{ float: 'left' }}
/>,
<FlatButton
label="Cancel"
primary={true}
onClick={this.handleClose}
/>,
<FlatButton
type="submit"
label="Submit"
primary={true}
/>,
];
return (
<Dialog
title="Dialog With Custom Width"
modal={true}
open={this.state.open}
>
<form action="/" method="POST" onSubmit={(e) => { e.preventDefault(); alert('Submitted form!'); this.handleClose(); } }>
This dialog spans the entire width of the screen.
<TextField name="email" hintText="Email" />
<TextField name="pwd" type="password" hintText="Password" />
<div style={{ textAlign: 'right', padding: 8, margin: '24px -24px -24px -24px' }}>
{actions}
</div>
</form>
</Dialog>
);
}
}
const App = () => (
<MuiThemeProvider muiTheme={getMuiTheme() }>
<Example />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('container')
);
In HTML5 form="" attribute can be used as a reference to any form on a page. So button gets form="my-form-id" attribute and form gets id="my-form-id" attribute.
return (
<Dialog
open
actions={[
<RaisedButton type="submit" form="my-form-id" label="Submit" />
]}
>
<form id="my-form-id" onSubmit={handleSubmit(this.onSubmit)}>
<TextField {...fields.username} floatingLabelText="Username" />
</form>
</Dialog>
);
I use Material UI v0.20.
Dialog is a ui component of material ui, it will not submit your form data automatically, if you want to create a form, define it inside the Dialog like this:
<Dialog
title="Dialog With Custom Width"
actions={actions}
modal={true}
open={this.state.open}
>
/*CREATE THE FORM UI HERE*/
<div>Field1</div>
<div>Field2</div>
<div>Field3</div>
</Dialog>
If form contains many field then use the bool in dialog to make the content scrollable autoScrollBodyContent = {true} .
You defined a function this.handleSubmit.bind(this) on submit button click, inside this function call the api and submit the data that you want to submit, once api call is success, close the dialog box.
Please comment if this solves your issue or any other details you want.