I have Modal in React Js which is working fine on button click
Here is Modal
<Modal isOpen={modalIsOpen} onRequestClose={()=>setmodalIsOpen(false)}>
Here is Button on which click it is working
<button onClick={()=>{setmodalIsOpen(true)}}>Open modal</button>
Here is my function or hook
const [modalIsOpen, setmodalIsOpen] = useState(false)
That is quite simple as you can see but the task is -> with this working as weel
i want to open modal with a prop value which will be bollean(TRUE) .
Here is my prop
props.modalIsOpen
Its is containing the true value i have checked with console.
Now the question is where should i put condition to check
If there is true value in props please open the modal.
Else its working should be with hooks.
What i tried is
if(props.modalIsOpen){
setmodalIsOpen(true)
}
i know this is funny because it completely blanks my page. so i know this condition is now correct.
One more thing i am using function here on Modal page and class on the page from where props coming from.
Related
How do i close a react bootstrap popover component in a react functional component? currently i am using a hack that closes the popover using the rootclose method and calling body.click on the button inside, however i feel this is not ideal, is there any way or method in the react bootstrap component or maybe by using refs with which i can achieve this?
**************following is how my component is structured right now *****
const setVisibility = (
<Popover id="popover-basic">
<Popover.Body className="px-0">
//code here
</Popover.Body>
</Popover>
);
const EditVisibility = () => (
<OverlayTrigger
trigger="click"
placement="bottom-end"
overlay={setVisibility}
rootClose
>
//code here
</OverlayTrigger>
);
and then I'm calling the EditVisibility component in the return method of my react functional component
Please look into the folling sandbox: https://codesandbox.io/s/close-popover-ytpze2
Introduce a show state to make the Popover controlled.
In Popover.Header you can define a closer button and set the show state to false on click
Write a callback function which toggle the Popover on button click ("onToggle" property of OverlayTrigger)
i want to build a registration web page in react, that has a checkbox, and a text along that checkbox. one word in the text is a link to a pdf file which is the terms and conditions for example. now, how can i show that pdf not as a new window tab opened, but instead in the same tab and in a modal. i used the tag with a href attribute but it opened for me a new tab, and i dont know how to get that the modal will open in the page, with like a href link that when the user click on that link (not a button. link) the modal will show.
thanks
If you want to show modal to user, set one state modal, something like this:
const [modalConf, setModalConf] = useState({show:false, mode:''})
and user click the link, you can change the state, like:
setModalConf({show:true, mode:'Terms'})
and finally, you render the modal component like this :
<Modal show={modalConf.show} mode={modalConf.mode} />
and your modal component will get mode component from props:
Modal component:
props.mode === 'Terms' && render Terms
props.mode === 'Privacy' && render Privacy
I have the following structure in my ReactJS App - CodeSandBox link.
I'm trying to somehow submit the Formik form by using a button of Bootstrap modal window, however I am unable to understand how to call the form submission from 2 components down the tree and bring the functions together.
Could someone kindly advise whether it's even something that can be achieved?
Thanks!
In the FormFields component, you need to add an id to your form
<Form id="fooId">
and for the modal button you add the form and type attribute like:
<Button
...
type="submit"
form="fooId"
...
/>
And the form would be submitted. You can skip passing the onClick event to that button and pass the doSubmit method to the Formik component in FormFields component.
Codesandbox
So, I'm trying to use Semantic UI modal component with the form component.
My problem is that if I use these two together the UI becomes bad.
I created a sandbox about my current situation: https://codesandbox.io/s/2n1pj96ry
As you can see now the submit button does not attached to the form.
If I move the Form component directly inside the Modal component, like this:
<Modal...>
<Form>
...
</Form>
</Modal>
the submit will attached to the form, but the UI breakes down.
I tried to add different classes to these components (like ui modal to the Form component, but it doesnt worked well).
Do you have any suggetsion?
Thanks for you help!
You can use the as prop on the Modal to make it a form element.
<Modal
as={Form}
onSubmit={e => handleSubmit(e)}
open={true}
size="tiny">
Any button with the submit type in your modal will fire the onSubmit handler. I find this to be a nice way to opt-in to required fields and easy validation by the browser on form elements.
Be sure to pass the event to your submit handler and use the preventDefault method to avoid the browser from automatically trying to post your form.
Forked your sandbox and made a working example. The modal is changed to a <form> element, the Input has the required property and the browser will demand the element is valid before firing the onSubmit handler. The default form action is prevented, and you can handle as desired with whatever.
I've been using react-table heavily throughout my React app which has been so useful but now I've got a weird bug I believe
I've got a react table with a subcomponent structured as such
<ReactTable
data={Data}
columns={columns}
SubComponent={row => {
return (
<div>
<p>I am the subcomponent</p>
<button onClick={this.toggleHidden.bind(this)} >
Click to additional information
</button>
{!this.state.isHidden && <p>Hello world</p>}
</div>
);
}}
/>
And here's what that looks like in the browser - the blue button on the left opens and closes the subcomponent and that works just fine, I've used subcomponents like this throughout my React App with no problems
When clicking the 'Click to additional information' button I want to show additional information ('Hello world' in this example) it runs this piece of code
constructor () {
super()
this.state = {
isHidden: true
}
}
toggleHidden () {
this.setState({
isHidden: !this.state.isHidden
})
}
But what happens in the browser is that the subcomponent toggle is closed and looks like this
If I reopen the subcomponent you can see that the 'hello world' is now showing so if did work as I wanted but just automatically closing the subcomponent which I didn't want to happen
In the console I'm not getting any errors or logs from react-table - it seems that any time I try to set a state inside of the react-table subcomponent that it will automatically close like this
My guess is that setting the state has reset all the states and that is what is confusing react-table, but I don't see how it would be?
I've just updated react-table to the latest version 6.8.6 but still have the same problem
Is this a bug or is there something I've done wrong here?
i fixed this by collapseOnDataChange: false
I had a similar issue. I have a subcomponent and inside the subcomponent are buttons which trigger functions when clicked:
The delete button had the following code:
<button id="delete" onClick={this.deleteClient('id')}>Delete</button>
where deleteClient is defined as:
deleteClient = (clientRef) => {
console.log(`deleting ${clientRef}`)
}
With the above code, "deleting id" would console.log both when I opened the subcomponent and when I clicked on the button.
I resolved the problem by using a callback in onClick as such:
<button id="delete" onClick={() => this.deleteClient('id')}>Delete</button>
Now "deleting id" only console.logs once, at the appropriate time, which is when I hit "Delete".
TL;DR:
set your onClick to a callback function.
Hope that helps!