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>
Related
I have the following code to use React To print, a library to print a component:
<ReactToPrint
trigger={() =>
<SqIconButton action={(e)=>e} color={"success"}>
<AiIcons.AiFillPrinter style={{color: 'black',fontSize:'1rem'}}/>
</SqIconButton>
}
content={() => componentRef.current}
/>
And my custom Button SqIconButton reads as follows:
export default function SqIconButton({children,color="primary",fontColor="#000000",action,tip="",disableElevation=false,sxstyle={},classes}){
return(
<Tooltip title={tip}>
<Button
color={color}
variant="contained"
onClick={action}
disableRipple={disableElevation}
className={`TBButton ${classes}`}
sx={sxstyle}
>
{children}
</Button>
</Tooltip>
)
}
In the examples of React To Print code for its trigger nothing is referencing "onclick" property on buttons, examples mostly look like this: <button>print this</button> and if I use this element it actually works. But my custom button does not work as is, so I think I have to pass the onclick event over my action custom property, so I'm trying with action={(e)=>e}, but the button does nothing when I press it.
Documentation says about trigger:
A function that returns a React Component or Element. Note: under the hood, we inject a custom onClick prop into the returned Component/Element. As such, do not provide an onClick prop to the root node returned by trigger, as it will be overwritten
So I don't know if onclick will be overwritten how could I pass this event to a child button component.
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 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>
i have redux form inside my reactstrap modal.when my popup appear,console log show below warning.without Form it's working charm.
You have a component say it's name is CustomComponent that retuns something like this
<div>
<Form {...this.props}>
<p> this.props.pText </p>
<Button>I'm a button named {this.props.buttonName} </Button>
</Form>
</div>
and when you render it in another file you do this
<CustomComponent pText="hi" buttonName="randomName">
so what happens is you are passing the buttomName, pText to your Form which doesn't accept pText, buttonName (remember, Your button & accept those props but not the form itself, so the virtual react DOM guesses that the prop is not for react, so it must be a real DOM prop & doesn't know what to do with it, to solve the problem, simply remove the {...this.props}
this is a result of how React is handling custom vs predefined DOM attributes -> see here
https://reactjs.org/warnings/unknown-prop.html
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.