Ram Mudaliar Ram Mudaliar - 4 years ago 295
Javascript Question

reactJS how to pass state when going to another URL? (clicking "New" on navbar that goes to Submit form)

I have added a navigation to my react app whereby I can click on the link, New, to be taken to a new page to submit my form.

However, how do I pass my state to this page? First and formost, this is my 3rd day of using the react, so I am most probably doing this wrong:

In the main.js, I have declared my routes:

var routes = (
<Router history={createHistory()}>
<Route path="/" component={App}/>
<Route path="/submit" component={NewLink}/>
<Route path="*" component={NotExist}/>
</Router>
)


In my App component, I have only two main components (and these have more components in them that are used):

render : function() {
return (
<div>
<TopNav />

<ShowLinks allLinks={this.state.links} />
</div>
)
}


So, the main page shows all the links (similar to the webpage reddit), and from the navbar it takes to the
newLinkForm
whereby user can make a new link to submit. However, how can I send my state here? Through
TopNav
component?

NEW UPDATED CODE:

main.js

import React from 'react';
import ReactDOM from 'react-dom';


/*
Router components
*/
import {Router,Route} from 'react-router';
import {createHistory} from 'history';

import NotFound from './components/NotFound';
import App from './components/App';
import CreatePost from './components/CreatePost';

var routes = (
<Router history={createHistory()}>
<Route path="/" component={App}>
<Route path="/submit" component={CreatePost}/>
</Route>

<Route path="*" component={NotFound}/>
</Router>
)

ReactDOM.render(routes, document.querySelector('#main'));


App.js

import React from 'react';

import NavigationBar from './NavigationBar';
import CreatePost from './CreatePost';
import DisplayPosts from './DisplayPosts';
import NewPostForm from './NewPostForm';

var App = React.createClass({
getInitialState : function() {
return {
posts : {}
}
},
componentDidMount : function() {

var my_localStorage = localStorage.getItem('post-');

if(my_localStorage) {
// update component state to reflect what is in local storage
this.setState({posts : JSON.parse(my_localStorage)});
}
},
componentWillUpdate : function(nextProps, nextState) {
localStorage.setItem('post-' , JSON.stringify(nextState.posts));
},
addPostToPosts : function(post) {
//console.log(post);
var timestamp = (new Date().getTime()); //research how to use uuid instead
this.state.posts[timestamp] = post;
this.setState({ posts : this.state.posts });
//console.log("key is " + Object.keys(this.state.posts));
},
render : function() {
//<CreatePost addPostToPosts={this.addPostToPosts} posts={this.state.posts}/>
return (
<div>
<NavigationBar/>
{this.props.children}
<DisplayPosts postData={this.state.posts} />
</div>
)
}
});

export default App;


NavigationBar.js

import React from 'react';
import {Navbar,Nav,NavItem,NavDropdown,MenuItem} from 'react-bootstrap';

var NavigationBar = new React.createClass({

render : function() {
return(
<Navbar className="my-navbar">
<Navbar.Header>
<Navbar.Brand>
<a href="/">Main React</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="/submit">New Post</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
});

export default NavigationBar


NewPostForm.js

import React from 'react';
import {History} from 'react-router';

var NewPostForm = React.createClass({
goBack : function(e) {
e.preventDefault();
console.log(this.history);
//this.history.goBack();
},
mixins : [History],
createNewPost : function(e) {
e.preventDefault();
//alert("pressed submit");
if((this.refs.title.value).length === 0 || (this.refs.message.value).length === 0 || (this.refs.image).length === 0) {
alert("Please fill out all fields!");
}
else {
//alert("yay");
//create new post object and send it to parent this.state.posts
var post = {
title : this.refs.title.value,
message : this.refs.message.value,
image : this.refs.image.value
}
//console.log(post);
this.props.addPostToPosts(post);
this.refs.newPostForm.reset();
}
},
render : function() {
//make this to react bootstrp
return (
<form className="new-post-form" ref="newPostForm" onSubmit={this.createNewPost}>
<div className="form-group">
<label>Title</label>
<input className="form-control" type="text" ref="title" placeholder="Title" />
</div>
<div className="form-group">
<label>Message</label>
<textarea className="form-control" type="text" ref="message" placeholder="Share your message" />
</div>
<div className="form-group">
<label>Image</label>
<input className="form-control" type="text" ref="image" placeholder="Share an image URL" />
</div>
<button type="submit" className="npf-btn btn btn-primary">Submit</button>
<button type="button" className="npf-btn btn btn-default" onClick={this.goBack}>Cancel</button>
</form>
)
}
});

export default NewPostForm;


CreatePost.js

import React from 'react';
import NewPostForm from './NewPostForm';

var CreatePost = React.createClass({

render : function() {
return (
<NewPostForm addPostToPosts={this.props.addPostToPosts}/>
)
}
});

export default CreatePost;

Answer Source

Not sure this will answer your question, but I think your more so asking about how to deal with navigation rather then any form of state.

Since your trying to create a new link, there doesn't seem to be a reason for you to pass state. I think what your really trying to ask is:

How do I get my TopNav and my ShowLinks components to also appear on my new /submit page.

The answer to that question is simple. You can nest routes.

To me it seems like what your trying to do is:

var routes = (
    <Router history={createHistory()}>
        <Route path="/" component={App}>
            <Route path="/submit" component={NewLink}/>
        </Route>

        <Route path="*" component={NotExist}/>
    </Router>
)

By wrapping NewLink with your App component you can use the navigation layout you already have setup, and just pass down the props.

render : function() {
        return (
            <div>
                <TopNav />
                {this.props.children}
                <ShowLinks allLinks={this.state.links} />
            </div>
        )
    }

The line I added {this.props.children}, you can think of that as where your subcomponents will now render. So when you visit /submit you will be using both the App component and from inside their the NewLink component.

Hope this was what you were looking for :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download