Multi Step Form With React & Material UI
Why Stack Overflow recommends it
Stack Overflow users link it as the go-to walkthrough for building multi-step forms in React with Material UI, and often as the tutorial that askers are following when they hit errors.
Recommended by 4 people across 4 different months, 2018 to 2021.
What it is
A 44-minute Traversy Media tutorial by Brad Traversy, with a guest author's code, that builds a multi-step React form using class components and Material UI. It covers user details, personal details, a confirmation step and a success page, with step state held in a parent component and passed down as props.
What people said
Recommends ChampR · 2018-12 · Stack Overflow · on “How to add Material-UI form with Steppers in React-Amin Create Component”
Incase anyone ever gets stuck on this, I found a nice tutorial [this video] on youtube that you can easily follow.
Recommends Alexander Bryksin · 2019-07 · Stack Overflow · on “Multi Step form in React”
here is good example by Brad [LINK] , [this video] - guide I have sandbox project with multi-step form with same approach, mb it's similar to what you want: [LINK] (MeetupCreate folder is multi-step form) Hope you understand main idea of multi step form feature :)
Recommends Zabi Babar · 2020-07 · Stack Overflow · on “Template layout of Sign-In form from Material-UI is messed up”
Material-UI is a react library so you have to React and also Node installed on your machine. You can't just download and run it. You can follow this video to see how React and Material-UI are installed. [this video] Just make sure to download Node before you do that. [LINK]
Recommends Juan-man · 2021-01 · Stack Overflow · on “Differenceses between Nextjs and React when trying to create a form”
I am learning react/nextjs and I have come into an issue when following a react tutorial and trying to convert it into nextjs. I am trying to create a simple form that will submit data so a great tutorial I thought. The tutorial I am following is here: [this video] @ 12.22 They use: state = { step: 1, firstName: '', lastName: '', email: '', occupation: '', city: '', bio: '' } so I just changed this to: const state = { step: 1, firstName: '', lastName: '', email: '', occupation: '', city: '', bio: '' } which I understand to be correct by I am now doubting myself although it's not throwing up any issues at the moment? My second issue is: render() { const { step } = this.state; const { firstName, la
Cites Dworo · 2019-07 · Stack Overflow · on “What's the best way to store values of multiple radioGroups in state of controlled component?”
Total newbie to React.I'm building a multi-step form with a step counter in the State and Switch statement in the original render method to show what component is displayed. Similar to the tutorial on [this video] . I'm also storing all the values entered by the user in the state via props. There's a page where the user is meant to pick a rating from 1,2,3 from multiple radioGroups to select values from the corresponding question. Like a survey! And these radioGroups change depending on which form the user decides to fill out. I want to know the best way to store the values from the radioGroups into the state so I can destructure them in later stages/steps. So far I've got the following code(basi
Cites Marshall · 2019-09 · Stack Overflow · on “type error message - function not recognised as a function when passed as a prop to click event (newbie here)”
I'm new to react and I'm trying to code along to this tutorial to make a multi page login form: [this video] (26.18 mark) I run into this error message 'TypeError: this.props.nextStage is not a function' As far as I can tell I've followed the tutorial line by line minus some name changes but I still run into this error. I've probably made an obvious error somehow but I'm stuck and I'd appreciate any guidance as to what the issue might be. Doing some research it appears it might be a 'binding' issue which I've attempted to implement but in all honesty I'm unsure if I'm even doing that correctly. The problem seems to also repeat with any functions passed as props I expect that when I click on the c
Cites Dworo · 2019-12 · Stack Overflow · on “Selected option is not displayed in autocomplete TextField”
In my code i'm trying to create something similar to a search bar in a multi-step/form application based on [this video] . Please see below code. import React, { Component } from 'react'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import AppBar from 'material-ui/AppBar/AppBar'; import AutoComplete from 'material-ui/AutoComplete'; import Container from '@material-ui/core/Container'; import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; import Avatar from 'material-ui/Avatar'; import RaisedButton from 'material-ui/RaisedButton'; import FormControl from '@material-ui/core/FormControl'; import InputLabel from '@material-ui/core/InputLabel'; i
Cites Dworo · 2019-12 · Stack Overflow · on “How to access JSON object in React state?”
I think your answer sheds some light on to the issue. I am using a technique similar to whats displayed in [this video]
Cites Colfah · 2020-07 · Stack Overflow · on “React Multi Step Forms - HMTL warnings don't work”
I'm building a multistep form using React and following the approach from CSS Tricks [LINK] and Brad Traversy's video [this video] and code [LINK] Everything is working fine except for displaying the html warnings when a required filed isn't filled out or the user has entered a value below the minimum allowed value etc. I could code for this using javascript but this will be very time consuming because different (required) fields render on the form depending on options selected. Here is a summary of my code for one of the components: export class EventDetails extends Component { continue = (e) => { this.props.nextStep(); }; render() { const { values } = this.props; return ( <form> <h2>Event Detai
Cites theJuls · 2021-01 · Stack Overflow · on “Differenceses between Nextjs and React when trying to create a form”
It looks like you may be mixing up functional components and class based components along with a couple other issues. If you are to stick to the tutorial you linked to, UseForm needs to be a class and have to extend the React component, and you will also need the render function. As you can see on the code during this point on the video [this video] You need to both import React and Component to implement a proper component. So basically this: import React, { Component } from 'react' export class UseForm extends Component { ... } I did also notice you are declaring consts in your return statement. This is incorrect. You don't declare anything in a return statement, it isn't the same as a function