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()
Related
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>
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 have the next application:
https://codesandbox.io/s/uwmig?file=/index.js,
There users can add as many fields as they want and add images for each generated input, clicking on add button.
What I want to achieve is to set a default open input in my application and to get something like this:
Now the default section is open by doing:
const firstRowOpen = { name: 0, key: 0, isListField: true, fieldKey: 0 };
and:
{fields.concat(firstRowOpen).map((field, index)... //here i map already concatinated fields and this is why appears first default block
Code:
<Form.List name={[fieldKey, "inner"]}>
{(fields, { add, remove }) => {
return (
<div>
{fields.concat(firstRowOpen).map((field, index) =>
!fieldsOnEdit.includes(index) ? (
<Space
key={field.key}
style={{ display: "flex", marginBottom: 8 }}
align="start"
>
<Demo
idx={index}
upload={upload}
setUpload={setUpload}
field={field}
/>
<Form.Item>
<Button
type="primary"
htmlType="submit"
key="submit"
onClick={() => toggleSmall(index)}
>
Toggle first row
</Button>
</Form.Item>
</Space>
) : (
<Edit value={values} mode={toggleSmall} keyForm={index} />
)
)}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
block
>
<PlusOutlined /> Add field to inner
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
Issue: when I add an image clicking on add button, and after that click on toggle first row button, appears another buttons bellow.
Question: Why this issue appears? and how to solve the issue?
demo: https://codesandbox.io/s/wonderful-ives-o81ue?file=/SubForm.js:767-2195
If I understand right you need to use initialValues
Here is an updated example of your code
https://codesandbox.io/s/compassionate-fermi-4oedx?file=/SubForm.js
...
<Form
name="dynamic_form_item"
{...formItemLayoutWithOutLabel}
onFinish={onFinish}
initialValues={{ names: [""] }}
>
...
I'm using Material UI for the icons for connect and disconnect.
I want the application to swap between these two icons onClick.
I'm new to React, but haven't any helpful resources yet.
Here's the code as it is so far:
{ user.connected ?
(
<Button color="info" simple size="sm">
<PersonAddDisabled className={classes.footerIcons} /> Disconnect
</Button>
)
:
(
<Button color="info" size="sm">
<PersonAdd className={classes.footerIcons} /> Connect
</Button>
)
}
As it is above, I am address whether they are connected or not, but I'm not sure how to implement a toggle of those two buttons, where onClick it will switch between the two.
here is a code
Your state
state = {
connected: true
}
onClickButton(){
this.setState(prevState => {connected: !this.prevState.connected})
}
Your code
{ this.state.connected ?
(
<Button color="info" simple size="sm" onClick={ this.onClickButton }>
<PersonAddDisabled className={ classes.footerIcons } /> Disconnect
</Button>
)
:
(
<Button color="info" size="sm" onClick={ this.onClickButton }>
<PersonAdd className={ classes.footerIcons } /> Connect
</Button>
)
}
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) {}