Here in this one I have already declared the onClick but now I want to change the color of button whenever I click it should
<Button
className={classes.button_reset}
onClick={() => setShowResetPass((current) => !current)}
>
Reset Password
</Button>
<Button
sx={{ ml: "20px" }}
onClick={handleCancel}
className={classes.button_light}
>
Cancel
</Button>
<Grid md={6} xs={12}>
{showResetPass && (
<>
<Typography
color="#05445E"
fontFamily="'Jost', sans-serif"
fontSize={15}
sx={{ mt: "20px" }}
>
Enter New Password
</Typography>
<Input
className={classes.inputEmail}
fullWidth
type="password"
/>
</>
)}
This is the states I have used
const [showResetPass, setShowResetPass] = useState(false);
You could do something like that:
<Button
sx={{ ml: "20px" }}
onClick={handleCancel}
className={showResetPass ? classes.button_light : classes.button_dark }
>
Related
I'm trying intergrate an option to display the data of a Card it's Dialog, with there being multiple Cards.
Right now I'm getting all the data from Firebase and each record is being displayed in a Card. The problem is that the Dialog will only display the data of the last looped item in the map, not of the Card that I'm trying to display in the Dialog.
How can I get the corresponding data from a Card and put it in it's Dialog? E.g: I open the Dialog of the 4th Card and only the data of the 4th Card gets displayed
The code:
useEffect(() => {
const getEvents = async () => {
const data = await getDocs(eventsRef);
data.forEach((doc) => {
setEventList(data.docs.map((doc) => ({...doc.data(), id: doc.id})));
})
};
getEvents();
}, [])
return (
<>
<div className="stepper-title" style={{textAlign: "center"}}>
<b><h1>Aankomende afspraken</h1></b><br></br><p>Prik een afspraak die jou intereseerd</p>
</div>
<div className="event-list-container">
{
eventList && eventList.map((item, index) => {
return (
<div key={item.id}>
<Card variant="outlined" sx={{ width: 250 }}>
<CardContent>
<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
{item.date}
</Typography>
<Typography variant="h5" component="div">
{item.occasion.title}
</Typography>
<Typography sx={{ mb: 1.5 }} color="text.secondary">
{item.location}
</Typography>
<Typography variant="body2">
{item.occasion.description}
</Typography>
</CardContent>
<CardActions>
card {index}
<Button onClick={handleClickOpen} size="small" itemID={item.id}>bekijken</Button>
<Dialog open={open} onClose={handleClose} PaperProps={{elevation: 1}} hideBackdrop>
<DialogContent>
<TextField
label="Titel"
defaultValue={eventList[index].occasion.title}
fullWidth
variant="standard"
/>
<TextField
label="Description"
defaultValue={eventList[index].occasion.description}
fullWidth
variant="standard"
/>
<TextField
label="Datum"
defaultValue={eventList[index].date}
fullWidth
variant="standard"
/>
<TextField
label="Locatie"
defaultValue={eventList[index].location}
fullWidth
variant="standard"
/>
<TextField
label="Naam"
defaultValue={eventList[index].organizer.name}
fullWidth
variant="standard"
/>
<TextField
label="E-mailadres"
defaultValue={eventList[index].organizer.email}
fullWidth
variant="standard"
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>terug</Button>
<Button onClick={handleClose}>Aanpassen</Button>
</DialogActions>
</Dialog>
</CardActions>
</Card>
</div>
)
})
}
</div>
</>
);
I am using MUI Accordion. In the Accordion details I have multiline textfield component to capture user responses and a button at the bottom for saving the data. Now if the user is keying in multiple lines, the button moves down and then disappears. Accordion details is not adjusting the height dynamically with the increase in the height for textfield component. If the user collapse and expand the accordion again the height readjusts.
How can I adjust the height of the accordion details dynamically as the text field contents grows ?
<AccordionDetails key={"SubCatIDDetails_" + this.props.SubCategoryID} >
{quesSubCategories.map((quesSubCat) => (
<>
<Grid container spacing={2} marginTop={1} marginBottom={1} textAlign={'Left'}>
<Grid item xs={3}>
<Typography> {quesSubCat.question}
{quesSubCat.hint.length > 0 && <HtmlTooltip
title={<Typography color="inherit"><i>{quesSubCat.hint}</i></Typography>}>
<IconButton>
<InfoIcon color="primary" />
</IconButton>
</HtmlTooltip>}
</Typography>
</Grid>
<Grid item xs={3.5}>
<TextField multiline fullWidth label="Response" name="Response" defaultValue={quesSubCat.response || ''} onBlur={(event) => this.props.handler([quesSubCat.quesID, quesSubCat.responseID, event.target.value, event.target.name])} />
</Grid>
<Grid item xs={3}>
<TextField multiline fullWidth label="Notes" name="Notes" onBlur={(event) => this.props.handler([quesSubCat.quesID, quesSubCat.responseID, event.target.value, event.target.name])} />
<NotesDetails Updated={this.props.UpdatingResponse} NoteType="Question" QuestionID={quesSubCat.quesID} ApplicationID={this.props.ApplicationID} userEmail={this.props.userEmail} />
</Grid>
<Grid item xs={2.5}>
<Status currentStatus={quesSubCat.quesStatus} QuesCat={quesSubCat.quesID} ResponseID={quesSubCat.responseID} currentTargetDt={quesSubCat.targetDate} handlerChange={this.HandleStatusChange} />
</Grid>
</Grid>
<Divider style={{ background: '#c4540c' }} />
</>
))}
{this.props.UpdatingResponse && <p style={{ marginLeft: '15px' }}><em>Updating...</em></p>}
<Button style={{ marginTop: '10px', marginBottom: '10px', marginLeft: '10px' }} color="warning" variant="contained" startIcon={<SaveIcon />} onClick={this.props.handlerClick}>Save & Continue</Button>
</AccordionDetails>
Sorry, this is my first post and I'm new to React.
I have this code below and I use steps for the buttons, however I would like the save button to be the submit type and only it, thanks for your help now.
<React.Fragment>
<React.Fragment>
{activeStep === steps.length ? (
<React.Fragment>
<Typography variant="h5" gutterBottom>
Saved
</Typography>
</React.Fragment>
) : (
<React.Fragment>
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 4}}>
{activeStep !== 0 && (
<Button onClick={handleBack} sx={{ mt: 3, ml: 1 }}>
Back
</Button>
)}
<Button
variant="contained"
onClick={handleNext}
sx={{ mt: 3, ml: 1 }}
>
{activeStep === steps.length - 1 ? 'Save' : 'New'}
</Button>
</Box>
{getStepContent(activeStep)}
</React.Fragment>
)}
</React.Fragment>
</React.Fragment>
and these are the steps functions
function CheckoutContent() {
const [activeStep, setActiveStep] = React.useState(0);
const handleNext = () => {
setActiveStep(activeStep + 1);
};
const handleBack = () => {
setActiveStep(activeStep - 1);
};
i'm using material-ui for this.
If I understand your question, this is what you can do:
const savable = activeStep === steps.length;
<Button
type={savable ? "submit" : undefined}
variant="contained"
onClick={savable ? undefined : handleNext}
sx={{ mt: 3, ml: 1 }}
>
{savable ? "Save" : "New"}
</Button>
You can do a conditional rendering:
Check the updated codesandbox
{activeStep === STEPS.length - 1 ? (
<Button variant="contained"
type="submit"
sx={{ mt: 3, ml: 1 }}
> Save </Button>
) : (
<Button variant="contained"
onClick={handleNext}
sx={{ mt: 3, ml: 1 }}
> New </Button>
)}
I'm trying to make an entry in a text field and display the value in the field for each letter.
However, every time I type, I lose the focus in the field.
I use the whole thing within a dialog component of Material-Design
const [aendereEmail, setaendereEmail] = React.useState("");
<Dialog
onClose={userBearbeitenDialogClose}
aria-labelledby="responsive-dialog-title"
fullScreen={fullScreen}
open={userBearbeitenDialog}
>
<DialogTitle id="simple-dialog-title">User bearbeiten</DialogTitle>
<DialogContent dividers>
<Col md={12} style={{ textAlign: "center", marginTop: "20px" }}>
<TextField
id="email"
type="text"
variant="outlined"
label="eMail"
onChange={(e) => setaendereEmail(e.target.value)}
value={aendereEmail}
/>
</Col>
</Row>
</DialogContent>
<DialogActions>
<Button
color="primary"
onClick={() => userBearbeitenSpeichern(aktuellerUser)}
>
übernehmen
</Button>
</DialogActions>
</Dialog>
I have a material-ui card in which it contains image, input field, check-box and a submit button. In which card is displaying onclick on some other option which is not mentioned in the below code. I want to close a card when I click on submit. How can I achieve this?
<Card
className="details-card"
style={{ paddingTop: "0px" }}
color="primary"
>
<CardHeader
style={{
paddingBottom: 0,
paddingTop: 0
}}
title="Image"
/>
<img src="https://unsplash.it/200/?random" />
<CardContent className="details-card-body">
<TextField label="Name" fullWidth />
<Grid container>
<Grid item xs={4}>
<Typography>
New User
<Checkbox
checked={this.state.addNew}
name="addNew"
onChange={this.handleCheckBox("addNew")}
value="new user"
inputProps={{ "aria-label": "Checkbox B" }}
/>
</Typography>
</Grid>
</Grid>
<Button variant="contained" color="primary">
Click to Tag
</Button>
</CardContent>
</Card>
Here below is my code on CodeSandbox
https://codesandbox.io/embed/lppzx48r0m
There are multiple ways to achieve what you want to do
you'll need a flag to conditionally hide or show the card.
For example lets take flag variable in state, and change state variable flag based on submit button and on the basis of this.state.flag you can do
{this.state.flag ?
(<Card
className="details-card"
style={{ paddingTop: "0px" }}
color="primary"
>
//Card content
</Card>)
:
null
}
You can also provide conditional css based on this.state.flag
<Card
className="details-card"
style={{ paddingTop: "0px", display: this.state.flag ? block : 'none'}}
color="primary"
>
//Card content
</Card>
P.S.: The second approach is not recommended because we are rendering element even if it is not needed.