I am using material-ui skeleton (Shimmer effect) on data which is coming from API. Output is given below : As you can see, I received 3 objects from API. So accountData.usersAccountData.map will run 3 times. My question is, How can I implement mui skeleton while API is under process ? How can show shimmer effect while API is under process
Tag: material-ui
How to align left for Item1 and align right for Item2 & Item3 with MUI React?
I have one component, which have three different Typography components inside. I want to align “summary” to the left, and ‘miles’ and ‘duration’ to the right. My code is below: I tried messing around with the justifyContent attribute but didn’t work. I’m pretty new to CSS and styling so not sure what the best approach for this situation. Answer
Change a JSON value with an MUI Switch component
I am setting the state of an MUI switch based on the response from an API. The Active field in this API response dictates whether the Switch is checked or unchecked. The switch is checked if the JSON field is 1, and un-checked if the field is 0. When I manually check or un-check the switch, I want to reflect
How to make an image-covered background in react
I have an image and i need to make it cover all of the background. The problem is, that for some reason the image isn’t covering all of the background, and it always stops somwhere where i put another object, and never goes farther then this. Im using material ui and my code looks like this This is the result
Material UI checkbox toggle value based off input from object
I have an unchecked checkbox. I am trying to change the value of it based off of data from an object. The object is from an SQL select boolean column ‘T’ or ‘F’. If the value is ‘T’ then the box would be checked vise versa. I tried using a useState() that viewed the value but that didn’t work. This
Change number format and get it as a number
I am using MUI and Formik to create form. I need to change numbers format in the all inputs: 1000.00 -> 1.000,00 A created function formatNumber(num) to do this, it works. But problem is that it returns string, and my API wait number (I can do nothing with that). I tried to use react-number-format but it also returns string. So
Cannot read properties of null (reading ‘pulsate’) in material-ui Button component
This is version of material-ui that I am using : This is how I imported Button component : This is how I am using Button : I am getting an error like this : Cannot read properties of null (reading ‘pulsate’) I found this thread(solution) from github Link , but it did not solved my issue . How do I
Swipeable Drawer to open with onClick function (material ui)
Problem faced: In the documentation’s code (https://codesandbox.io/s/cnvp4i?file=/demo.tsx), the drawer is triggered and opens when the “Open” button is clicked at the top. However, I want the drawer to be triggered and opened when the drawer is clicked instead. (onClick function) What I’ve tried: I’ve tried attaching the onClick function to StyledBox and SwipeableDrawer components (https://codesandbox.io/s/cnvp4i?file=/demo.tsx) but the onClick function is
“ being surrounded with quotes when sending to “, causing SVG to not render
When attempting to use Material-UI’s SvgIcon component the <path> is being surrounded by quotes, causing the SVG to not render. I am working out of Storybook in an MDX file. To render the SVG I’ve tried a few methods, but they all result in the same output. The most straightforward of these attempts is: The reference going into <SvgIcon> is
REACT- Popover doesn’t display my json content
In menu/ the name of my invited people are not diplayed there is only the InfoIcon in the Cell. I want to create a Popover, when you click on the InfoIcon, you get all the info of the invited people(name and location). Here is my code Answer In addition to saving the clicked element into state so the Popover component