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
Related
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>
}
I need to disable a button in reactjs depending on a value taken from a different component.
In below component (main.js), I need to disable the Button. But This has to be disabled depending on a value taken from a value another component (upload.js)
export default function HorizontalLabelPositionBelowStepper() {
.
.
.
return (
<Grid container>
<Grid item lg="12" md="12" xs="12">
<div className={classes.root}>
<div>
<Grid container justify="center">
<Grid item md="1">
<Button // button I need to disable
variant="contained"
color="secondary"
onClick={handleNext}
endIcon={<NavigateNext />}
>
{activeStep === steps.length - 1 ? "Finish" : "Next"}
</Button>
</Grid>
</Grid>
</div>
</div>
</Grid>
</Grid>
);
}
And this is the upload.js
// imports...
.
.
.
export default function ElevateAppBar(props) {
const [file, setFile] = useState('');
const [filename, setFileName] = useState('eg: employees.csv'); // this filename value should be passed to the component `main.js`
return (
<Grid container justify="flex-start">
<Grid container item lg="12" md="12">
<Grid item lg="4" md="4" xs="4">
<Form>
<Form.File id="custom-file" label={filename} custom />
</Form>
</Grid>
</Grid>
<Grid container justify="center">
<Button variant="contained" style={{backgroundColor: "lightgreen"}} endIcon={<CloudUpload />}>
Upload
</Button>
</Grid>
</Grid>
);
}
In the upload.js I have a variable with the name filename. I need to pass this value to the first component - that is main.js
so the logic could be like something (this is not reactjs syntaxes, this is just to give the idea on what I need to do):
if(filename_taken_from_upload_js == "eg: employees.csv"){
// disable the button
}else{
// enable the button
}
Can someone help, Please?
This could be a case for lifting state up : https://reactjs.org/docs/lifting-state-up.html#lifting-state-up
If this value could be used by other unrelated components, you should consider putting it in a global state, using Redux or Context API.
https://redux.js.org/faq/react-redux#react-redux
https://reactjs.org/docs/context.html#when-to-use-context
i have a cards.js which has the following function. Now the calling method passes three values . header1, header2 and Link (this is the *.js page that has to be called)
export default function Cards(props) {
const classes = useStyles();
return (
<div className="App">
<Card className={classes.card} variant="outlined">
<CardContent>
<Typography
variant={"h5"}
gutterBottom
>
{props.header1}
</Typography>
<Typography
variant={"caption"} >
{props.header2}
</Typography>
<Divider className={classes.divider} light />
<Button variant="contained" color="secondary" onClick={()=> (call either link1.js or link2.js )}>
Lets goooooo!
</Button>
</CardContent>
</Card>
</div>
);
}```
calling method
class UIM extends Component {
render() {
return (
<div className="text-page">
<Grid container alignItems="center" justify="space-evenly" >
<Grid ><Cards header1="card 1 for a task1" header2="click text2" link="link1"/></Grid>
<Grid ><Cards header1=" card 2 for task 2" header2=" click text 2" link="link2"/></Grid>
</Grid>
</div>
)
}
}
I am new to react and learning right now, so wondering if such a thing is possible or should i use router to route to different pages (ie. call either link1.js or link2.js ) ??
I found out by by adding pathname:props.link i can get the button to link to multiple locations within the material ui button.
<Card className={classes.card} variant="outlined">
<CardContent>
<Typography
variant={"h5"}
gutterBottom
>
{props.header1}
</Typography>
<Typography
variant={"caption"} >
{props.header2}
</Typography>
<Divider className={classes.divider} light />
<Button variant="contained" color="secondary">
<NavLink to={{pathname:props.link}}>Lets goooooo!</NavLink>
</Button>
</CardContent>
</Card>
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>
I have a modal(using bootstrap 4 for react). And I want for two buttons to pass value to binded functions. How can I do this?
Here is my code
this is component
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>
<WeatherInfo
nameOfCity={nameOfCity}
weatherDescription={weatherDescription}
windSpeed={windSpeed}
temperature={temperature}
maxTemperature={maxTemperature}
minTemperature={minTemperature}
isChec={isChec}
change={this.toggleCheckboxChange.bind(this)}
/>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={function(){this.addToMyCityList.bind(this); this.toggle()}}>Add City</Button>{' '}
<Button color="primary" onClick={function(){this.removeFromMyCityList.bind(this); this.toggle()}}>Remove City</Button>{' '}
</ModalFooter>
</Modal>
and these are the functions that should get value
addToMyPCityList(e) {
this.props.dispatch(mPkArrayAdd(e.target.nameOfCity.value))
}
removeFromMyCityList(e) {
this.props.dispatch(mPkArrayRemove(e.target.nameOfCity.value))
}
This should work
<Button color="primary" onClick={function(e){this.addToMyCityList(e, myParam); this.toggle()}}>Add City</Button>
addToMyCityList(e, myParam) {}