I have a component with render method like this:
<ListGroup>
{myarray.map(function(item, k) {
return (
<ListGroupItem
key={item._id}
bsStyle={item.status==='FAIL'?'danger':null}
>
Hello world
<button onClick={showModal}>Open Modal</button>
</ListGroupItem>
);
})}
</ListGroup>
I would like to show the modal on clicking of button with text Open Modal. There will be many list items with the button, however the content of the modal will be different which is dynamic populated from myArray.
I'm stuck here, since react-bootstrap modal needs the show state which I'm not aware of how to handle from multiple modals on the same page.
Related
I am using react-bootstrap version 1.5.2 in react version 17.0.1. The problem is that the modal closes immediately after I click anywhere inside the modal body and that is not its natural behavior. I looked at some other questions that suggested using backdrop={ 'static' } but that too didn't work.
The other modal that I have in the page opens just fine and that too has the same components - the accordion inside. The only thing that is different here is I have get methods in useState and elements inside accordion is editable (used some functions there) but I dont think they are related to this modal behaviour as I haven't used anything to trigger the state. This the code how I have implemented the modal.
//the show.hide toggle is the usestate
const [showHelper, setShowHelper] = useState(false);
<div className="clarify-icon" onClick={() => setShowHelper(true)}>
<FaInfoCircle size="24" color="#BC2A20" className="pointer" />
</div>
<Modal
show={showHelper}
// backdrop="static"
onHide={() => setShowHelper(false)}
className="modal-left"
>
<Modal.Header closeButton>
<Modal.Title>Helper Text Templates</Modal.Title>
</Modal.Header>
<Modal.Body>
<Accordion defaultActiveKey="0">
...
</Modal>
It is pretty much the same thing. I am not sure what went wrong here.
I didn't find any suitable answer for this question. Here is what I am looking for.
I have lists of menus items coming from the state array variable (https://i.imgur.com/FzD0sol.png).
I have an add button which opens a modal. Modal includes an input field. (https://i.imgur.com/6DCZhoj.png)
The final result would be when some click adds button of modal, its field values updated in menus state array. which further updates the menus list on UI.
I able to made all these UI. But I didn't have any idea how can I pass my data from modal input to menus list. Here is codesandebox link of the same problem (https://kx6yr.csb.app/).
There is a way to solve your problem :
You have to give a callback props to your Modal component. As it, The modal will be able to add an item.
There is the codesandBox : https://codesandbox.io/s/friendly-boyd-ptxem
So this is one way to do it, in your modals add this onAdd prop:
<AddModal
heading="Add Food"
modalId="addFood"
inputName="addFood"
onAdd={(textEntered) => { alert(textEntered); }}
ref={this.foodModal}
/>
<AddModal
heading="Add Drink"
modalId="addDrink"
inputName="addDrink"
onAdd={(textEntered) => { alert(textEntered); }}
ref={this.drinkModal}
/>
And within the modal component, call this handler passing the input value:
<button
type="button"
onClick={this.props.onAdd.bind(this, this.state.item)}
className="golden-button-op"
style={{ margin: "0px" }}
>
Add
</button>
Hope it helps!
I have a react modal inside a react table cell. issue is that, it covers the whole screen. Any idea why it is happening ? This is the code snippet of a react table cell.
Header: '',
Cell: row => {
return (
<div>
<Modal open={this.state.open} onClose= .
{this.onCloseModal}>
<h2>Simple centered modal</h2>
</Modal>
</div>
When i click a a . button, i set the open as true,but the modal covers the whole screen, Any idea why ?
I'm rendering a Modal from reactstrap library, and i want to have within this text modal another link tag. Something like "Click here to show it". So, when the modal appears, the user can see that text and also can click on the here word to render another different Modal. How can achieve that?
This is my code:
code where i'm calling the Modal
<Modal
show={showGeneralModal}
children={"Click " + here + " to show it"}
title={modalTitle}
size={modalSize}
onExit={this.toggleNormalModal}
/>
code from the original exported Modal
return (
<div>
<Modal
isOpen={isOpen}
backdrop="static"
keyboard={false}
toggle={this.toggle}
size={size}
onExit={onExit}
>
<ModalHeader className={modalHeaderClasses} toggle={this.toggle}>
{title}
</ModalHeader>
<ModalBody className={modalBodyClasses}>
{children}
</ModalBody>
</Modal>
</div>
);
I'm getting right now this text within the modal:
Click [object Object] to show it
And i would like to have instead
Click here to show it
and when i click on here word, the other Modal should be rendered.
Any suggestions?
I can't modify the original Modal code cause it is being used for many other components in different places.
Btw, i was in a wrong way to do that. If you are in the same trouble, you may know that children is an already prop of react which allows you to access whatever you passed in the component that you are accessing to.
Knowing that, you don't have to pass children prop, just pass within the component whatever you want to be inside of children prop. So, instead of doing this:
<Modal
show={showGeneralModal}
children={"Click " + here + " to show it"}
title={modalTitle}
size={modalSize}
onExit={this.toggleNormalModal}
/>
do this:
<Modal
show={showGeneralModal}
title={modalTitle}
size={modalSize}
onExit={this.toggleNormalModal}
> Click here to show it
</Modal>
I am doing a program in react and I want to show a list of permissions after I click the button.
Right now I am showing the information with window.alert but i want to show it on a prettier list.
The button that I press:
What is showing right now (prints all elements on the list one at the time):
When i click that butotn i want all the elements of the list to appear on this way:
Is there any way to do that?
You could use a combination of the react-bootstrap Popover and the ListGroup components in your render method.
const popover = (
<Popover id="popover-permission" title="Permissions">
<ListGroup>
<ListGroup.Item>Permission 1</ListGroup.Item>
<ListGroup.Item>Permission 2</ListGroup.Item>
<ListGroup.Item>Permission 3</ListGroup.Item>
</ListGroup>
</Popover>
);
return <OverlayTrigger trigger="click" placement="bottom" overlay={popover}>
<Button variant="secondary">Show Permissions</Button>
</OverlayTrigger>