I recently started learning React and I'm trying to create a Wizard ponent. Originally I was picturing that it could be used like this:

<Wizard isVisible={this.state.isWizardVisible}>
    <Page1 />
    <Page2 />
</Wizard>

I started running into problems (still having an OOP mindset) when I wanted to extract properties, even ponents from the children (Page1, Page2) to configure/overwrite the Wizard (title, footer ponents, etc).

This of course can't be done, because on Wizard.render I don't have access to the ponents themselves.

Then I came across this repo with a Wizard ponent. The ponent in the repo is configured with an array of Steps, which are javascript objects to configure the current step in the wizard and contain a ponent property which returns the React ponent.

That approach certainly solves the problem but I'm wondering if it could be done differently or if there's a more "React" way of solving it, in a way that each Page/Step ponent encapsulates the behavior and not the other way around (like in the repo).

I recently started learning React and I'm trying to create a Wizard ponent. Originally I was picturing that it could be used like this:

<Wizard isVisible={this.state.isWizardVisible}>
    <Page1 />
    <Page2 />
</Wizard>

I started running into problems (still having an OOP mindset) when I wanted to extract properties, even ponents from the children (Page1, Page2) to configure/overwrite the Wizard (title, footer ponents, etc).

This of course can't be done, because on Wizard.render I don't have access to the ponents themselves.

Then I came across this repo with a Wizard ponent. The ponent in the repo is configured with an array of Steps, which are javascript objects to configure the current step in the wizard and contain a ponent property which returns the React ponent.

That approach certainly solves the problem but I'm wondering if it could be done differently or if there's a more "React" way of solving it, in a way that each Page/Step ponent encapsulates the behavior and not the other way around (like in the repo).

• javascript
• reactjs

Share Improve this question Follow asked Mar 18, 2016 at 21:35 user1294431user1294431 63511 gold badge77 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

The "React" way of solving it is to keep your whole application state at the very top of your ponent hierarchy. Of course, React is essentially just the V in MVC, and not opinionated when it es to how you manage your data and state logic. But what you want to achieve is something like this:

<Wizard isVisible={this.state.isWizardVisible}>
    <GenericPage foo={something} bar={somethingElse} />
</Wizard>

By this logic, Wizard has access to all the application state you wish to provide, and pass down whatever GenericPage needs to render the current page. If you need a GenericPage ponent to be able to modify state, just pass down functions as props as well.

There are several frameworks that implement mon ways to handle changes in the application state. Facebook has Flux, but Redux seems to push all the right buttons and is my framework of choice.

You can try memoizing the props with:

https://github./gilbox/react-derive

then you can pass the props from Page1 to Page2 ponent.