DEV Community

Discussion on: How to create multi-step forms in React?

View 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!