React router changing landing view to search results view - reactjs

Question

EDIT: Added component to view
I am trying to render the correct page view based on a submit button from a search. Currently I have a search bar at the top of the view and a default landing page in the middle. When the user searches I want to change the default landing page to the profile page they are searching for.
I am assuming I will have to remove the component from Main and replace it with {this.props.children}. Then in I will have to add maybe a around the submit button? The problem with this so far is that Profile then doesn't get the necessary props it needs from SearchBar.
My view ideally will show at the top and in the main container. When the user searches will change to containing the correct user information searched for which is passed to from -> ->
Below are my current Routs and Main components
import React, { Component } from 'react';
import { Router, Route, Redirect, IndexRoute, Link, hashHistory } from 'react-router';
import Main from '../components/Main';
import Profile from '../components/Profile';
import Landing from '../components/Landing';
class Routes extends Component {
render() {
return (
<Router history={ hashHistory }>
<Route path="/" component={Main}>
<Route path="Profile" component={Profile}></Route>
<Route path="Landing" component={Landing}></Route>
<IndexRoute component={Landing}></IndexRoute>
</Route>
</Router>
)
}
}
export default Routes;
Main
import React, { Component } from 'react';
import Routes from '../utils/Routes';
import Footer from './Footer';
import Profile from './Profile';
import SearchBar from './SearchBar';
import Landing from './Landing';
class Main extends Component {
constructor(props) {
super(props);
this.state = {
profileName: ''
}
}
handleProfileChange(profileName) {
this.setState( { profileName });
//replace <Profile /> with {this.props.children} maybe
}
render() {
return (
<div className="container-fluid">
<div className="row">
<SearchBar history={this.props.history} handleProfileChange={this.handleProfileChange.bind(this)} />
</div>
<div className="row">
<Profile name={this.state.profileName} />
</div>
<div className="row">
<Footer />
</div>
</div>
)
}
}
export default Main;
SearchBar
import React, { Component, PropTypes } from 'react';
import Profile from './Profile';
import TopNav from './TopNav';
import sass from '../scss/application.scss';
import { Router, Route, Redirect, IndexRoute, Link, hashHistory } from 'react-router';
class SearchBar extends Component {
constructor(props){
super(props)
this.state = {
name: ''
}
}
handleChange(e) {
this.setState({
name: e.target.value
});
}
handleSubmit(e) {
e.preventDefault();
console.log("searching for NAME " + this.state.name);
let profileName = this.state.name;
profileName = profileName.toLowerCase().trim();
//Cap the first letter in the name and add the rest of the name
profileName = profileName.charAt(0).toUpperCase() + profileName.substr(1);
console.log("NEW NAME " + profileName);
this.props.handleProfileChange(profileName);
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit.bind(this)}>
<input type="text" placeholder="Enter Name"
name="name"
value={this.state.name}
onChange={this.handleChange.bind(this)} />
<button className="btn btn-success" type="submit">Search</button>
</form>
</div>
)
}
}
SearchBar.propTypes = {
handleProfileChange: React.PropTypes.func.isRequired,
}
export default SearchBar;

Answer 1

Here's a basic sketch, if I understand you correctly. This would be the search bar and the submit.
class SearchProfiles extends Component {
static contextTypes = {
router: PropTypes.object,
};
state = { search: '' };
onSubmit = e => {
e.preventDefault();
// maybe do your search here, or inject it directly.
this.context.router.push(`/profiles/${this.state.search}`);
};
onChange = e => this.setState({ search: e.target.value });
render() {
return (
<form onSubmit={this.onSubmit}>
<input onChange={this.onChange} value={this.state.search} />
<button type="submit">Search Profiles</button>
</form>
)
}
}
You would have to add a route for the search, though.
<Route path="/profiles/:search" component={Profile} />