I am trying to load different content of Modals onClick of different button.
Save the model content in state
In onClick pass the new content to the function and do setState
Change the visibility according to the logic
Below is the code to send the argument to React member functions
onClick = {(e) => this.showModel(e , newContent) }
Can elaborate more if you share your code
Thanks
{["first","second"].map(option => {
return (
<Button
size="small"
color="secondary"
variant="raised"
onClick={this.handleClickOpen}
>
{option}
</Button>
);
})}
<Dialog
open={this.state.open}
onClose={this.handleClose}
>
<DialogTitle id="alert-dialog-title">
{"Use Google's location service?"}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
hello /here must be different names/
</DialogContentText>
</DialogContent>
</Dialog>
Related
I have a button that looks like:
<Grid item xs={4} sm={12} md={6}>
<Button
variant="contained"
color="success"
type="submit"
onClick={(handleClick, handleSubmit)}
value="Send"
>
Send message
</Button>
<Snackbar
open={open}
autoHideDuration={5000}
onClose={handleClose}
>
<Alert
variant="filled"
severity="success"
autoHideDuration={500}
onClose={handleClose}
>
{"Message sent!"}
</Alert>
</Snackbar>
</Grid>
The button only calls the first function passed to onClick send button. How do make it so that both functions are called?
const onSendMsg = () => {
handleClick()
handleSubmit()
}
Then change to onClick={onSendMsg}
wrap both functions inside a parent function and execute both on the click
I want to open the diaglog when the screen is visited so I set the default state to true. I made a custom button. When I click on it, the state should change to false and the dialog should close. However, the dialog doesnt close. What am I doing wrong and how else can I close the dialog?
<Dialog open={openReminder}>
<DialogTitle>Reminder</DialogTitle>
<DialogContent>
<DialogContentText>Don't forget to take your daily walk!</DialogContentText>
<div className={classes.reminderContainer}>
<DialogButton
text={"Ok, thanks!"}
onPress={() => setOpenReminder(false)}
/>
</div>
</DialogContent>
</Dialog>
export const DialogButton = ({ onPress, text }) => {
const classes = useStyles();
return (
<Button onPress={onPress} className={classes.button}>
{text}
</Button>
);
};
Issue is with the onPress event try using onClick,
<Button onClick={onPress} className={classes.button}>
{text}
</Button>
Two things which I note :
You need to change onPress to OnClick inside like this :
<Button onClick={onPress} className={classes.button}>
{text}
</Button>
Check inside your Dialog component that you explicitly hide it when 'open' prop is set to false.
<DialogButton text={"Ok, thanks!"} onPress={()=>setOpenReminder(!openReminder)}/>
<Button onClick={onPress} className={classes.button}>
{text}
</Button>
Change the onPress with onClick in your child component like this.
<Button onClick={onPress} className={classes.button}>
{text}
</Button>
check out if it works.
I'm trying to make the dimmer show only on ETH or Select a token button clicks. I couldn't even get the state part working so I can connect the buttons.
function Main () {
const [accountAddress, setAccountAddress] = useState(null);
const [show, setShow] = useState(false);
return (
<div ref={contextRef}>
<Dimmer.Dimmable as={Segment} dimmed={show}>
<Grid style={styles.grid}>
<Grid.Row>
<Grid.Column>
<Card style={styles.card} centered>
<Card.Content>
<Card.Header style={styles.padding}>Swap / Pool</Card.Header>
<Input style={styles.padding} fluid type='text' placeholder='0.0'>
<Label basic>From</Label>
<input />
<Button>ETH <Icon name='angle down' /></Button>
</Input>
<Input style={styles.padding} fluid type='text' placeholder='0.0'>
<Label basic>To</Label>
<input />
<Button>Select a Token <Icon name='angle down' /></Button>
</Input>
<Button style={styles.padding} color='teal' fluid size='large'>
Connect Wallet
</Button>
</Card.Content>
</Card>
</Grid.Column>
</Grid.Row>
</Grid>
<Dimmer onClickOutside={setShow(false)}>
<Header as='h2' icon inverted>
<Icon name='heart' />
Dimmed Message!
</Header>
</Dimmer>
</Dimmer.Dimmable>
</div>
);
}
I removed a-lot of unrelated code but left in the other instance where I use useState() because I feel like that might be part of the issue.
Any help is appreciated, thank you.
Originally you were using as <Dimmer onClickOutside={setShow(false)}> in your code. In this way it gets into an infinite loop because on every render it gets called which triggers an another render.
You need to pass as a callback instead:
<Dimmer onClickOutside={() => setShow(false)}>
In this way setShow(false) will be called once onClickOutside event triggers.
I am building a Material UI app. I have a card component and I need to make it clickable. But there is also a button on the top right corner which edits the card on click. The problem is, when I click on that button, it'll handle 2 actions:
the edit action called on the button itself
clicks the card
Here is a snippet of code:
<CardActionArea href={`/${item.name}`}>
<Card key={index}>
<CardHeader
action={
<Fab color="secondary" onClick={handleClick}>
<EditIcon color={"primary"} />
</Fab>
}
/>
<CardContent className={classes.cardContent}>
<Avatar className={classes.avatar} alt={item.name} src={item.avatar} />
<Typography variant="h6" color="textSecondary">
Card description
</Typography>
</CardContent>
</Card>
</CardActionArea>
How could I achieve that?
In the card component you create both functions you want to run when clicking the card and the inner button:
const onCardClick = () => {
// your code here
}
const onButtonClick = () => {
onCardClick()
// your code here
}
In Card.jsx when rendering the button inside the card add the onButtonClick function
<MyButton onClick={onButtonClick}
then in your button component, you give it an onClick prop:
const MyButton = (props) => {
<Button onClick={prop.onClick}>title</Button>
}
when I click the text box text a popup menu should open with text box.
similarly when I click a filter icon in the right side corner a menu should open with list of checkboxes.
but right now whats happening is both the menus are opening when I click at both the places.
only one menu should open from one location.
I debugged by putting consoles. the problem is with the below methods
`const handleClick = event => {
setAnchorEl(event.currentTarget);
};
const handleClickFilter = event => {
setAnchorEl(event.currentTarget);
};`
can you tell me how to fix it.
providing my code snippet and sandbox below.
https://codesandbox.io/s/material-demo-kpt5i
const handleClick = event => {
setAnchorEl(event.currentTarget);
};
const handleClickFilter = event => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleCloseFilter = () => {
setAnchorEl(null);
};
<Typography variant="h6" id="tableTitle" onClick={handleClickFilter}>
text box
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleCloseFilter}
>
<MenuItem onClick={handleCloseFilter}>
<form
className={classes.container}
noValidate
autoComplete="off"
>
<TextField
id="standard-name"
label="Name"
className={classes.textField}
// value={values.name}
// onChange={handleChange('name')}
margin="normal"
/>
</form>
</MenuItem>
</Menu>
</Typography>
<Tooltip title="Filter list">
<IconButton aria-label="filter list">
<FilterListIcon onClick={handleClick} />
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>
<Checkbox
onChange={handleColumnHide}
inputProps={{ "aria-label": "select all desserts" }}
value="name"
/>
Dessert
</MenuItem>
<MenuItem onClick={handleClose}>
<Checkbox
onChange={handleColumnHide}
inputProps={{ "aria-label": "select all desserts" }}
value="calories"
/>
Calories
</MenuItem>
<MenuItem onClick={handleClose}>
<Checkbox
onChange={handleColumnHide}
inputProps={{ "aria-label": "select all desserts" }}
/>
Fat
</MenuItem>
Alright, you had a couple issues on your code that was preventing this from working properly.
The idea of the 'anchor' element it's that the menu will attach to that DOM object and render right next to it; this is all handled for you by Material and it works like a charm but the thing it's that you need to have this anchors properly set.
First, you need a way to differenciate an anchor element for each menu you want to display (which in your case, it's two).
For this case to work, I used a 'type' prop inside of your anchor state object and another prop called 'target' which is the one that will store the 'event.currentTarget'. Something like this: { type: 'icon', target: event.currentTarget }
Then, you need to have each anchor element (which can be a button, an icon, a label, H1 or whatever you want) separated from the Menu component itself; if you do otherwise, then the Menu will never disappear and it can only be closed using TAB or refreshing. Something like this:
<Typography variant="h6" id="tableTitle">
<span onClick={handleClickFilter}>NOTICE THIS LABEL HAS THE MENU TRIGGER FUNCTION</span>
<Menu
id="simple-menu"
anchorEl={anchorEl && anchorEl.type === 'textbox' && anchorEl.target}
open={Boolean(anchorEl && anchorEl.type === 'textbox')}
onClose={handleClose}
>
<MenuItem>
<form
autoComplete="off"
>
<TextField
label="Name"
margin="normal"
/>
</form>
</MenuItem>
</Menu>
</Typography>
Then, finally you need the anchor handler functions, which at this point it's handled by a hook and it's storing with the same variable name except it's modifying the 'type' prop I mentioned before.
const handleClick = event => {
setAnchorEl({ type: 'textbox', target: event.currentTarget })
}
const handleClose = () => {
setAnchorEl(null)
}
This should do the work successfully.
Anyway, I modified your codepen code and updated it right here.
Hope this helps!