Custom stepper with progress bar material ui, react - reactjs

I am working on a stepper and I am using the code from https://codesandbox.io/s/dazzling-beaver-45ky0?file=/src/CustomStepper.js
Over here the progress between two steps is on click of next button, I want to show it on the basis of form fields filled.
Secondly, I want to save the progress of user in json file, so that when the user log in again, he must resume from where he left. I an unable to know how to do this.
I am new to react.
Any help is appreciated. Thanks in advance.

Related

React JS when click menu button, entire page shift right

I need your suggestion. I want to develop website in React JS. For start I draw a wireframe. I'm planning to use react libraries if possible. Below is my wireframe. Can I know for a start, what I should search. The 1st image will be the UI. When I click the hamburger button, the page will slide right as shown in 2nd image. Please help guys
Image 1
enter image description here
Image 2
enter image description here
There's a few things you will need to consider:
Storing and toggling the open/close state of your sidebar
The layout of your DOM elements
The transformation of your page content
Here's a sandbox to help you out: https://codesandbox.io/s/adoring-napier-s8gs09?file=/src/App.js

What kind of component I should use to inform a user that an action has been completed successfully?

I have an app where the user can download a photo. After downloading it, I want to display a small message saying "Download successful". Initially I wanted to show Modal from https://reactnative.dev/docs/modal but then I wanted this info to disappear either in 5 sec, or if the user taps outside of the modal. So I thought I should wrap my Modal inside an Animated component https://reactnative.dev/docs/animations
Am I on the right track? Is this the way to show a user friendly message - wrapping modal inside animated. Or there is another component which I can use?
I think it will be better if you use SnackBar for such purposes.
You can use any snackbar library in your project. Your wrap it around with your project, Then whenever you need to throw information message or error message you just called the hook for that snackbar. Also it will automatically disappear after showing the message. you won't need to take care of seconds.
notistack package : https://www.npmjs.com/package/notistack
You can also checkout the Material UI Alerts.

Can't update a component in ReactJS

I am working on a usual crud application in React. You can add a party to the list and each party list item can be edit, deleted etc. Currently, I am working on the grey + button which should increment the votes by 1 each time the button gets clicked.
UI of the application
However, as soon as I click the button, the application breaks with the following error code.
Error Code
I am trying to update a component using setState(), but its not working. I thought somebody might help. I have been trying for 3 days, but nothing works. I have to admit that I am a beginner.
Here is a link to the current code .
https://github.com/Benni8753/Election2021.git
Thanks in advance.
Benjamin

Dropdown list with a slide-down animation

I have a button where I wants to implement a dropdown list upon the click action of it. Hence, that dropdown list should smoothly slide down (not pop-up) once the button is clicked. How can I achieve this. Once I did this feature in native IOS, but the fact I'm new to react-native I have troubles of understanding how to it. Any help with a code snippet would much appreciate.

Changing images for angular UI DatePicker control

I am using UI Bootstrap for just datepicker control.
By default when we mouse hover inside textbox, it shows up 3 images (close button, up down spinner, button)
I want to remove the first 2 images and change the last one to some other image.
I went through jS code but could not find any code for that.
Anyone who has similar requirement or knows about the code, please help.
Thanks in advance.

Resources