DEV Community

Cover image for How to create multi-step forms in React?

How to create multi-step forms in React?

Samet Mutevelli on September 11, 2020

sametweb / react-step-builder React Step Builder allows you to create step-by...
Read full post
Collapse
 
xxcoledotxx profile image
xXCole-DOTXx •

Step 6 is a bit confusing to me. So I make a component like formNav.tsx and enter the code you gave. That makes sense. But where does the config file go? How do I use it in App.tsx? Also, "location: "before", // or after" what do I do with this? How do you set it up to decide before or after? Everything before step 6 is phenomenally written but I really don't understand what's going on after that.

Collapse
 
sametweb profile image
Samet Mutevelli •

location: "before" | "after" is basically telling the Steps component to render your Navigation component either before the form, or after.

And there is no config file, but there is a config object.

Perhaps you missed this part:

Now let's create the config object.

const config = {
  navigation: {
    component: Navigation,
    location: "before", // or after
  }
};
Enter fullscreen mode Exit fullscreen mode

Finally, let's pass this object to our Steps component.

<Steps config={config}>
  // your Step components
</Steps>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
xxcoledotxx profile image
xXCole-DOTXx •

Thanks for the reply! I guess I missed you refering to config as an object so that makes sense now. I was also really confused about where I was supposed to put the tags because you had put them in app.js. I now realize that you put them wherever you want the multi page form to start. Makes perfect sense. I love what you've done here and thanks again!

Collapse
 
devalo profile image
Stephan Bakkelund Valois •

I'm getting a
SyntaxError: Cannot use import statement outside a module
module.exports = require("react-step-builder");

When trying to use it inside a React Next container.
Error happens as I'm importing the module into my component.

Collapse
 
sametweb profile image
Samet Mutevelli •

Hello Stephan,
Although I am happy to help you with that, I am not very confident with my Next.js knowledge.
I researched the error message, and obviously, it helps in some cases if you add "type": "module" in your package.json file.
If that doesn't solve your issue, could you maybe reproduce the issue on codesandbox or share the repo with me so I can take a better look?

Collapse
 
sametweb profile image
Samet Mutevelli •

This problem is solved with version @2.0.11

Collapse
 
krankj profile image
Sudarshan K J •

I had the same problem. You can get around it by using Dynamic Imports in Next.js
Refer to the 3rd comment by 'acelaya' here: github.com/asyncapi/asyncapi-react... on how to get around this issue.

Collapse
 
louiemiranda profile image
Louie Miranda •

When typing on an input field, why does it make the following error/warning?

1.chunk.js:55469 Warning: A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: fb.me/react-controlled-components
in input (at Step1.js:17)
in p (at Step1.js:17)
in div (at Step1.js:10)
in Step1 (created by Step)
in Step (at LabsBatch.js:21)
in Steps (at LabsBatch.js:20)
in LabsBatch (at App.js:646)
in Route (at App.js:642)
in Switch (at App.js:158)
in div (at App.js:155)
in App (at src/index.js:12)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:11)

Collapse
 
sametweb profile image
Samet Mutevelli • • Edited

There might be two things that cause this:

  1. This tutorial is for version 2. So you probably installed the newer version but still following the old version's tutorial. In that case, simply provide your value for the input like this: value={props.getState('name', '')}
  2. You are using value={props.state.name} for the input element. You shouldn't prefer this usage for the form element's value prop. This usage is meant for only after you know for sure that that form element received a value already. 4. step in the tutorial explains this. Also, if you downloaded the latest version 2.0.4 (check your package.json), please refer to the recent documentation on the GitHub readme file. github.com/sametweb/react-step-bui...

Feel free to reach out if you encounter problems further.

Collapse
 
louiemiranda profile image
Louie Miranda •

Thank you. Yes, I think I followed the old versions tutorial. When I added "value={props.getState('name', '')}" it worked with no errors now. Again, thank you and nice work here.

Collapse
 
jaishinawaraj profile image
Nawaraj Jaishi • • Edited

When i try to add "after"/ "before" to the location it throw error to me saying tthis :
"(JSX attribute) config?: StepsConfig | undefined
Type '{ navigation: { component: (props: NavigationComponentProps) => JSX.Element; location: string; }; }' is not assignable to type 'StepsConfig'.
The types of 'navigation.location' are incompatible between these types.
Type 'string' is not assignable to type '"after" | "before" | undefined'.ts(2322)
index.d.ts(17, 5): The expected type comes from property 'config' which is declared here on type 'IntrinsicAttributes & StepsProps' "

here is my code why this type of error occure here?
my code snappit is following:

const AccountOpenForm = () => {

const config = {
navigation: {
component: StepNagivation,
location: "after",
},
};

return (








);
};

Collapse
 
kali70 profile image
Khaled Ben Amer • • Edited

Hello Sir,
I found you package and I like it. However, when I tried to use it in my Web App I have some issues using it and I need to see if you can help me with that. My data structure which I need to use multi-step for to get data from the user as followinf

course {
name,
instructor,
descriptions: 'desc'
chapters: [
{
id: 0
name: 'name',
description: 'desc'
lessons: [
{
id: 0,
name: 'Lesson name',
description: 'desc'
videso: [
url1, url2, ..... url n
]
]
}
}
]
}

In step one, I need to add course info,
In step two, I need to fill chapter info, (Will have a select of multiple chapters and I can select one to update or add a new chapter
In step Three, I need to fill Lessons info, ( WIll have multiple lessons in a chapter and I need to select one to edit or create a new one.

The only thing I did using you package was add course and I have issues adding chapters and lessons since the state can not read the nested chapters and lessons inside the course object.

If you can help will be appreciated

Thank you
Khaled Ali

Collapse
 
mohsinalisoomro profile image
MOHSIN ALI SOOMRO •

Very nice but is it working with checkbox and files?

Collapse
 
sametweb profile image
Samet Mutevelli •

I just published an update. I missed the fact that checkboxes are a little different from regular text inputs/areas.

Now props.handleChange function can be passed to onChange event of a checkbox field. props.getState('checkbox_name') can be passed to checked property of the same field. About file inputs, I need to do more research. However, props.setState('key', 'value') method for updating state can be a workaround for now.

Collapse
 
jaishinawaraj profile image
Nawaraj Jaishi •

@Samet Mutevelli please can you provide a example of using radio button or check button

Collapse
 
shunchiang profile image
Shun Chiang •

Very nice lightweight package and docs :)

Collapse
 
isaacpro01 profile image
ssemugenyi isaac •

Thanks @Samet, I would like to know if this package works with react native and if so, could you as well publish an article on it.

Collapse
 
sametweb profile image
Samet Mutevelli •

Some parts of the package is designed to work with HTML elements. Since React Native is not using HTML elements (such as inputs, checkboxes, etc.) I would have to tweak the configuration a little bit to support React Native out-of-box.

However, I tried installing it and next/previous functions are working. If you can configure the onChangeText handler with the help of props.setState method, I don't see any reason it shouldn't work. Again, I didn't test it fully. I will come back here and let you know once I do that.

Collapse
 
nekogato profile image
nekogato •

Very nice package! May i know how can i add fadein fadeout transition for changing step?

Collapse
 
sametweb profile image
Samet Mutevelli •

The current API of the package does not have anything built-in for the transitions. However, you can use other React libraries to achieve that. Basically, add transitions
to your step components on the mount and unmount phase. You can check out this package: reactcommunity.org/react-transitio...

Collapse
 
novizh profile image
Naufal Ardhi •

Is the value persisted if we press the previous button?

Collapse
 
sametweb profile image
Samet Mutevelli •

Yes, that's the whole point of holding values in a global state.

Collapse
 
jaishinawaraj profile image
Nawaraj Jaishi •

how to work with file upload ? its throwing error when i go previous stem

Collapse
 
sametweb profile image
Samet Mutevelli •

Shout out to Richard Mouser for emailing me pointing out a typo in one of the code snippets in the article!

Collapse
 
fuzica7x profile image
fuzica7x •

Hey there,

it's possible, that I am just not seeing it. How can I get the saved values outside the Steps component to make an API request to save them in my database?

Thank you!