React first time - structure, moving between pages and variables

Question

so I started with react few days ago and have first problem. I've build site structure using react-router and sample looks like this:

const app = document.getElementById('app');
ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={MainPage}></IndexRoute>
            <Route path="/creator" component={MainCreator}>
                <Route path="select" component={Step1}></Route>
                <Route path="customize" component={Step2}></Route>
            </Route>
        </Route>
    </Router>,
app);

In Layout I'm rendering some site parts (which works fine, so I'll skip this code):

render() {
    return (
        <div>
            <Header />
            <Menu />
            {this.props.children}
        </div>
    );
}

I move through pages by using Link, like:

<Link to="creator/select">Creator - step1</Link>

Moving forward, my MainCreator is another component, parent for subpages in it, right now it's simple as:

render() {
    return (
        <div>
        {this.props.children}
        </div>
    );
}

And my problem is concerned with the flow of the application and how to solve this. In Step1 of the Creator user have to choose document type that will be created (like "pdf" or "html"). Right now there are sample tags, but it can be anything. So after users clicks it, I have to remember selected value and load (can be after clicking submit button) Step2 component with proper view.

I tried to use this.state, but read I should use this.props instead, because state is/should be private in particular component. But I don't know how to construct this relation between Creator main page and two childs/steps (there will be 5 steps in Creator finally).

For me it should act like keeping this variable in Creator component, but be able to modify and read it's current state from any of Creator child.

Answer 1

In your maincreator component use a state which save record of user's choice. Pass this state as prop to step2 component. Also pass a function as a prop to step1 component. This function will just set the value of state acording to user's choice.

In your maincreator component define a state and a method and pass to the children component like this:

    constructor(props){
      this.state={ userResponse: null}
    }
    changeResponse = (res) => {
       this.setState({userResponse: res})
    }
    .....
    render() {
       const children = React.Children.map(this.props.children,
              (child) => React.cloneElement(child,{userResponse:this.state.userResponse, changeResponse: this.changeResponse})
          );
       return (
        <div>
        {children}
        </div>
    );
}