Passing data from one page to another while using router and state in ReactJS

Question

I am new to ReactJS. I am trying to figure out how to pass data from one page to another while using router. When I click on Add User button, I want to add the user and navigate back to home page.

I've searched the web for this and found examples where data is transferred from parent to child using props. But here I am using router. How can I find a way to do this?

index.js

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={Home}>
            <IndexRoute component={AllUsers}/>
        </Route>
        <Route path="/add" component={Add}/>
    </Router>
    , document.getElementById('root'));

Home.js:

class Home extends Component {
    render() {
        return (
            <div>
                <nav>
                    <ul>
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/add">Add</Link></li>
                    </ul>
                </nav>
                <div>
                    {this.props.children}
                </div>
            </div>

        );
    }
}

AllUsers.js

class AllUsers extends Component {

    constructor(props) {
        super(props);
        this.state = {
            headingsData: ["Name"],
            rowsData: []
        }
    }

    componentDidMount() {
        this.setState({
            rowsData: [{name: "Alex"}, {name: "Jack"}]
        })
    }

    render() {
        return (
            <div className="allUsersContainter">
                <h2>All users</h2>
                <table border="1" className="tableComp">
                    <Headings headings={this.state.headingsData}/>
                    <tbody>
                    <Rows rows={this.state.rowsData}/>
                    </tbody>
                </table>
            </div>

        );
    }
}


class Headings extends Component {
    render() {
        let headings = this.props.headings.map((heading, i) => {
            return (<th>{heading}</th>);
        });
        return (<thead><tr>{headings}</tr></thead>);
    }

}

class Rows extends Component {
    render() {
        let rows = this.props.rows.map((row, i) => {
            return (<tr key={i}><td>{row.name}</td></tr>);

        });
        return (<tbody>{rows}</tbody>);
    }
}

export default AllUsers;

Add.js

class Add extends Component {
    render() {
        return (
            <form>
                <label>First Name:</label><input placeholder="Name" ref="name" required/><br/>
                <button type="submit">Add user</button>
            </form>
        );
    }
}

export default Add;

have you tried using `this.props.history.push('/home')` once you have successfully added a user — Aaqib, Oct 28 '17 at 16:08
@AAqib,No, I haven't tried that. But before that, how do I transfer the data from Add component to the AllUsers component. I understand that on click of add button, I would have to write a function to save the data. But here I don't think it is possible to set the state data present in AllUsers component as it is not a parent component. Kindly advise how to fix this or any workaround — user24826, Oct 28 '17 at 16:18
Did you try using this? https://stackoverflow.com/questions/42173786/react-router-pass-data-when-navigating-programatically — Nandu Kalidindi, Oct 28 '17 at 18:36
@SlawaEremkin: the files above were split up with a heading for each one, making them easier to read. Please do not merge them together in an edit - that is plainly harder to read. It looks like you have changed some code as well, from the edit history at least: may I ask why you have done this? — halfer, Oct 29 '17 at 17:50

score 1 · Answer 1 · answered Oct 28 '17 at 18:32

This is a common problem to share a component state with another (not a child) component.

A good solution, in this case, is to use a state management library. Check out Redux or MobX as they are very common with React applications.

The main benefits of using those libraries with React application is Easy state sharing. This is the most important for you because you can share your state not only with child components as a props but almost for every component in your application.

For easy understanding, you can imagine state management libraries as a global state for your application, which you can modify almost from every component and subscribe to it changes.

Thanks. I would like to achieve it without using Redux/Mobx/Store or context. Only pure React. Is it possible. I was able to send state data to router using

Passing data from one page to another while using router and state in ReactJS

1 Answers1