I have following component on my page: When it is inside react-bootstrap accordion, it gets rendered in some scrambled state: If I click previous / next button, then it gets correctly rendered. Also if I zoom in / zoom out, then also it gets rendered correctly. I am able to imitate this in this codesandbox: Accordion 1 is initially rendered
Tag: react-bootstrap
Table inside Card.Body overflows in react-bootstrap
I am trying to create responsive table with space for a row details section inside a card using react bootstrap. I have coloured the different sections in different colours so it is easier to see what is going on. For some reason the card body overflows the card by a little. If I remove the Card.Body height it becomes even
boostrap collapse is not working in my react app
bootstrap collapse is not working in my react app . i want the collapse functionality in my app it is not working in my reactapp. i think bootstrap classes are working but bootstrap onclick is not working codesandbox code codesandboxlink bootstrap code bootstrap link solve this problem Answer you have to insall three dependencies in your app bootstrap jquery @popperjs/core
How to find out if the user has enter any value in the input field in react
How to find out if the user has enter any value in the input field in react. What I am trying to achieve is I would like to show a border around the card when the user enters the text/integer into one of the input fields inside that cards and does not click on the save button. So border should
How to hide the offcanvas navbar when selecting the links inside of it using react scroll?
Any idea on how to hide/back to its original state when selecting the links inside offcanvas using react scroll? Below is my code and also here is the sandbox code https://codesandbox.io/. App.js Header.js Content.js Im using the ff: react 17.0.2 react-router-dom 6.2.2 react-scroll 1.8.7 react-bootstrap offcanvas 2.1.2 https://react-bootstrap.github.io/components/offcanvas/ I’m not sure if I missed something like useState/useEffect or an attribute
Create a new row every three columns
I am trying to create a virtual shop and I want to make every row of products have four items on a large screen, three in medium, and two in smell. My problem is that I can’t come up with a way to make it that every four items I iterate the item list a new row will be created.
how to send data From one component to another components with context in react?
I need to send selectedCoin state from Company to details.js How do I do this with context? company component: details components: Answer Well, looks like you’re just interested on the code right, so I’ll just drop the code in here. Obviously, feels free to move code around and make sure you use the syntax that does make sense to you
trying to implement Material Design Navbar in React
I’m scratching my head here trying to figure out why I can’t see the styling applied to my Navbar. I’ve installed all of the necessary modules but it’s not happening. My code is below. I was working on a custom Navbar but the material one is very slick so I wanted to try it instead. Navbar code Here’s the code
I cannot find the error TypeError: Cannot read properties of undefined (reading ‘name’)
I’m new to react and I need some help when I´m trying to bring some “products” from an array of objects that I have in one file of my react app called “products.js”. The thing is that I am able to draw the products within the array in the Home Screen. However when I try to draw those products on
How to properly control focus and blur events on a React-Bootstrap InputGroup?
I have a single input element from react-bootstrap that will allow the user to change the field value and 2 buttons will appear, one to accept the changes and the other will cancel the changes leaving the original value in. I manage to control the focus and blur events by delegating the listeners to the wrapping component, my thinking is