All Questions
Tagged with bootstrap-modal reactjs
310
questions
0
votes
1
answer
30
views
React: Array inside of State is undefined when accessed from callback
I have a callback function, that is supposed to edit a value in an array, that is inside of a State. When I try to access the dataZähler, so the array itself, I get unedefined/Array of length 0 back. ...
0
votes
1
answer
26
views
Bootstrap Modal causes useEffect({...}, []) to trigger again
When using the Bootstrap <Modal /> component, when I do callbacks to the parent component, my entrie page rerenders, and triggers my useEffect({...}, [])-Hook, which should only be called once, ...
0
votes
0
answers
34
views
Bootstrap modal component not showing up
I have this in my app.tsx:
return (
<>
{console.log(showModal)}
{showModal === true && <Modal onClose={toggleModal}></Modal>}
</>
);
and I copied ...
0
votes
0
answers
12
views
React-Boostrap-Modal Not showing its styling in my Next.js Application/
i have this code that when the button "New Chat" is pressed it will popup the modal
return (
<div className="w-full overflow-y-scroll p-4 text-black">
{...
1
vote
0
answers
40
views
How to make bootstrap toast animation work?
Hey I'm reading these docs and it seems that bootstrap toast elements has a fuature of autohiding and even some fade out effects I guess.. But it doesn't work for me....
export const ErrorInfoMessages ...
0
votes
0
answers
41
views
jest test if modal component is being opened
I have a nextJs/React/Bootstrap app with a Bootstrap modal component. I am using Jest to test. I cannot get jest to find the modal component on the rendered page after I simulate clicking the button ...
0
votes
0
answers
24
views
Scrollbooster carousel inside a Bootstrap 5 modal don't scroll
Im trying to create a carousel with the js library Scrollbooster inside a bootstrap modal.
import React from "react";
import ScrollBooster from "scrollbooster";
export default ...
0
votes
0
answers
19
views
Overlapping Issue of Bootstrap Modals Content in React
I am displaying 3 Bootstrap modals in single page in my React App and each one have different design. But when I click on any model it displays me the model-body of the 1st modal because of the ...
0
votes
0
answers
31
views
Why isn't centered being applied on modal
I am trying to create a modal for confirmation of logout, and I'm trying to keep the modal at the center of the screen. It is getting center aligned, but vertically it isn't center.
Here's what I've ...
0
votes
1
answer
34
views
Bootstrap5 modal error when using with anchor tag
I have created a anchor tag with a trash icon which trigger the delete modal. Which have to button yes or no which futher hits their respective apis.
Below is part of a react component:
<a
data-...
0
votes
1
answer
19
views
Modal with reacjs is getting null value
I have a parent like this:
function ViewBudgetPage() {
const pathname = useParams();
const [plate, setPlate] = useState("");
const [bikeDataModal, setBikeDataModal] = useState(false);
...
0
votes
0
answers
155
views
Bootstrap modal not opening when button pressed
Im trying to make a bootstrap modal show when I press a button, heres the code:
(btw Im using React and Vitejs as the builder with this)
function Test() {
return(
<>
<div ...
0
votes
1
answer
62
views
Bootstrap modal on React doesn't show the value of argument passed by parameter
I'm creating a project with its front end in React. This is the code:
import React, {useState} from 'react';
import Tree from 'react-d3-tree';
import { useCenteredTree } from "./helpers";
...
0
votes
0
answers
294
views
How to use Drawer inside Modal in ChakraUI
So I need to create a design where user can click a button and then a full page Modal component shows up like this:
There is a blue button inside the Modal that open a drawer like this:
But I notice ...
1
vote
1
answer
40
views
Issue with changeHandler, component re renders every time i do some change
My plan is to make stepper component in modal so the every step will have own component.So i use switch case logic and that works fine for me it return the step and step component properly. I have ...