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) {}
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
Here is my code:
return (
<ThemeProvider theme={props.theme}>
<section className={classes.loginForm}>
{
mode === "LOGIN"
?
<LoginForm theme={props.theme} />
<br/> <br/>
<Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
SIGNUP?
</Button>
:
<SignUpForm theme={props.theme} />
<br/><br/>
<Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
SIGNUP?
</Button>
}
</section>
</ThemeProvider>
);
The error appears at the first character of the opening tag for the breakline HTML element. I do not understand why this is happening as I have code elsewhere that uses the same principle and has no errors at all.
These elements, inside the curly braces, need to be wrapped inside of a <React.Fragment /> (<> and </> for short)
https://reactjs.org/docs/fragments.html
Your code:
{
mode === "LOGIN"
?
<LoginForm theme={props.theme} />
<br/> <br/>
<Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
SIGNUP?
</Button>
:
<SignUpForm theme={props.theme} />
<br/><br/>
<Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
SIGNUP?
</Button>
}
Corrected code:
{
mode === "LOGIN"
?
<>
<LoginForm theme={props.theme} />
<br/> <br/>
<Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
SIGNUP?
</Button>
</>
:
<>
<SignUpForm theme={props.theme} />
<br/><br/>
<Button variant="contained" color="primary" onClick={() => setMode("SIGNUP")}>
SIGNUP?
</Button>
</>
}
For example, i have this functon that returns to me some ids and i get delete this posts with the id's returned with: onClick={() => { Delete(idvalue[i]) }}
However I need to open a modal before deleting the item asking if the person is sure they want to delete, and when they click on the yes I have no idea how to pass the right value to delete and where will stay this onClick to open the modal.
function Idchecker() {
for (let i = 0; i < idvalue.length; i++) {
if (idvalue[i] == item.id) {
return (
<div className="img-array">
<button className="click-img" onClick={() => { Delete(idvalue[i]) }}>
<img src={trash} alt="botão excluir" className="imgsbtns" />
</button>
<button className="click-img">
<img src={edit} alt="botão editar" className="imgsbtns" />
</button>
</div>
)
}
}
}
the modal:
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
style={{ fontFamily: "Questrial" }}
>
<Modal.Header>
<Modal.Title id="contained-modal-title-vcenter">
DELETE THE POST
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
are you sure?
</p>
<Button onClick={Delete}>YES</Button>
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>CLOSE</Button>
</Modal.Footer>
</Modal>
);
}
Add two state:
openDeleteModal to manage opening modal (argument for example, you have this argument yet)
deleteId to store id.
const [openDeleteModal, setOpenDeleteModal] = useState(false);
const [deleteId, setDeleteId] = useState(null);
When you click on post you must open modal and update deleteId, so rewrite onClick function:
onClick={()=>{
setDeleteId(idvalue[i]);
setOpenDeleteModal(true)}
}
Pass deleteId and setOpenModal via props to Modal component and rewrite modal buttons function:
<Modal.Body>
<p>
are you sure?
</p>
<Button
onClick={()=>{
Delete(deleteId)
setOpenDeleteModal(false) //close modal after delete
}}>
YES
</Button>
</Modal.Body>
<Modal.Footer>
<Button onClick={()=>setOpenDeleteModal(false)}>CLOSE</Button>
</Modal.Footer>
How can I conditionally pass the footer's button component? cancelBtnBasicModal and okBtnBasicModal the button is still there without text label.
Below is a modal component, it worked, but if I don't pass in
render() {
const { titleBasicModal, showBasicModal, handleOkBasicModal, handleCancelBasicModal,
contentBasicModal, cancelBtnBasicModal, okBtnBasicModal, loading } = this.props
return (
<div>
<Modal
visible={showBasicModal}
title={titleBasicModal}
onCancel={handleCancelBasicModal}
footer={[
<Button onClick={handleCancelBasicModal}>
{cancelBtnBasicModal}
</Button>,
<Button key="submit" type="primary" size="large" loading={loading} onClick={handleOkBasicModal}>
{okBtnBasicModal}
</Button>
]}
>
{contentBasicModal}
</Modal>
</div>
);
}
I tried
footer={[
{cancelBtnBasicModal && <Button onClick={handleCancelBasicModal}>
{cancelBtnBasicModal}
</Button>},
<Button key="submit" type="primary" size="large" loading={loading} onClick={handleOkBasicModal}>
{okBtnBasicModal}
</Button>
]}
But won't work coz footer prop accept array.
You need to pass an Array, spread operation is for rescue.
You can do something like that:
footer={[
...(cancelBtnBasicModal ? [
<Button onClick={handleCancelBasicModal}>
{cancelBtnBasicModal}
</Button>]: []),
<Button key="submit" type="primary" size="large" loading={loading} onClick={handleOkBasicModal}>
{okBtnBasicModal}
</Button>
]}
You can separate that logic by setting an array footerBtns with the default button (okBtnBasicModal in this case) and then we add the next button if it's passed through props.
Finally assign footerBtns to footer in the Modal component.
render() {
const { titleBasicModal, showBasicModal, handleOkBasicModal,
handleCancelBasicModal, contentBasicModal, cancelBtnBasicModal,
okBtnBasicModal, loading } = this.props
let footerBtns = [
<Button key="submit" type="primary" size="large" loading={loading}
onClick={handleOkBasicModal}>
{okBtnBasicModal}
</Button>
]
/* using unshift to add the button to the beginning of the Array */
cancelBasicModal && footerBtns.unshift(
<Button onClick=
{handleCancelBasicModal}>{cancelBtnBasicModal}
</Button>
);
return (
<div>
<Modal
visible={showBasicModal}
title={titleBasicModal}
onCancel={handleCancelBasicModal}
footer={footerBtns}>
{contentBasicModal}
</Modal>
</div>
);
}
More info on using unshift()
I'm working with react-bootstrap and ReactJS. I was expecting the select to take the options as an argument, but not seeing a way to populate the options. This is the code I have thus far. How do I pass in the data
render() {
return (
<div>
<Button bsStyle="primary" onClick={this.open}>Add Parameter</Button>
<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header>
<Modal.Title>Add / Edit Parameter</Modal.Title>
</Modal.Header>
<Modal.Body>
<form>
<FormGroup controlId="parameterType">
<ControlLabel>Type</ControlLabel>
<FormControl componentClass="select" placeholder="Type">
<option value="select">select</option>
<option value="other">...</option>
</FormControl>
</FormGroup>
</form>
</Modal.Body>
<Modal.Footer>
<Button bsStyle="primary" onClick={this.close}>Save Changes</Button>
</Modal.Footer>
</Modal>
</div>
)
}
you'd map over your data to produce the options programmatically. Suppose your options are in an array:
options=[{value: 'select'}, {value: 'other'}]
<FormControl componentClass="select" placeholder="Type">
{
options.map((option, index) => {
return (<option key={index} value={option.value}>{option.value}</option>)
})
}
</FormControl>