Changing Views in ReactJS

Question

I have not been using ReactJS for very long. I have a situation that I think must be very common, but I’ve not seen it addressed in any examples, and I’d like to know if there are any best practices involved.

The scenario is simply that say I have 3 forms in my application, FormA, FormB, and FormC. I have written each form as a separate ReactJS component. When the user lands on the site, FormA is displayed. Depending on the input on FormA, then either FormB or FormC will be displayed next, completely replacing FormA on the page.

I don’t think “routing” is the answer because I don’t want the URL to reflect the current application state, and I don’t want the user to be able to change forms by changing the URL. The switching of forms (components) should be done based only on business rules.

I know ReactJS is not a framework, but this seems like a common enough scenario that some useful patterns have probably evolved around it. Just a nudge in the right direction would be very helpful. Thank you.

Boris Zagoruiko · Accepted Answer · 2016-02-18 15:35:48Z

6

The solution is to create wrapper Form component that contains FormA, FormB, FormC and show one of them depends on its state. Like

const Form = React.createComponent({

  getInitialState() {
    return {
      form: 'formA'
      /* other state */
    }
  },

  render() {
    return (
      <div>
        {this.state.form === 'formA' ? <FormA onSubmit={this.saveFormData} /> : null}
        {this.state.form === 'formB' ? <FormB onSubmit={this.saveFormData} /> : null}
        {this.state.form === 'formC' ? <FormC onSubmit={this.saveFormData} /> : null}
      </div>
    )
  },

  saveFromData() {
    /* set state here */
  }

})

Such delegation is common for React. Normally you should manage your forms logic in the Form and FormA, FormB, FormC should be dumb components that can only execute functions from passed props.

Note that example code listing above is just a demonstration. Usually you don't need to keep form in state. Instead there can be i. e. username, password, email (or anything) and you should check what form to show based on this state values.

edited Feb 18, 2016 at 15:35

answered Feb 18, 2016 at 15:29

Boris Zagoruiko

13.2k15 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ItsCosmo Over a year ago

Thanks for the answer and link. This is what I was looking for.

Maycow Moura · Accepted Answer · 2020-05-26 23:49:14Z

2

Here's a very simple solution creating a SwitchComponents component:

// SwitchComponents.js:

import React from 'react';

export default function SwitchComponents({ active, children }) {
  // Switch all children and return the "active" one
  return children.filter(child => child.props.name == active)
}

And import it in your app:

// App.js
import SwitchComponents from './components/SwitchComponents';

export default function App() {

const [activeComponent, setActiveComponent] = useState("questions")

return (
    <SwitchComponents active={activeComponent}>
      <Home name="home" />
      <Instructions name="instructions" />
      <FileboxContainer name="filebox" />
      <Questions name="questions" />
    </SwitchComponents>
  )
}

If you don't wanna pass the "name" property, you can you the solution below:

return children.filter(child => child.type.name == active)

But that's the name you give to your function when you define you component, like this:

export default function MyFunctionName() { ... } // this is the name

Even if you import it with another name, that's still gonna be the name you must use.

answered May 26, 2020 at 23:49

Maycow Moura

7,0372 gold badges27 silver badges20 bronze badges

1 Comment

Garrett Badeau Over a year ago

This was extremely helpful in simplifying the problem.

JulienD · Accepted Answer · 2016-02-18 15:28:14Z

0

I'd say you have a main component that knows about the three form components. Initially it renders one of them. When you make a change to this one, it changes the main component's state (through callback prop, or an action in Flux design), and a different form is rendered based on the state.

answered Feb 18, 2016 at 15:28

JulienD

7,32310 gold badges57 silver badges88 bronze badges

Collectives™ on Stack Overflow

Changing Views in ReactJS

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related