Pass values from one component to another in react - reactjs

Question

container.js -
//Here we render the recipe details and display add recipe form.
import React, { Component } from 'react';
import './App.css';
import AddRecipe from './addrecipe.js';
class App extends Component {
constructor(props){
super(props);
this.state={ recipes :[] }
this.addRecipe=this.addRecipe.bind(this);
}
addRecipe (recipe) {
this.setState({
recipes: [...this.state.recipes, recipe]
});
}
componentWillMount(){
this.setState({
recipes : require('./sample-recipes')
});
}
home(e){
window.location='/a';
}
render() {
return (
<div className="App">
<h2>Welcome to the Recipe Book</h2>
<dl>
{this.state.recipes.map(recipe => {
return ( <div key={recipe.name} onClick={this.home}>
<dt>{recipe.name}</dt>
<dd>{recipe.ingredient}</dd>
<div><img src='{recipe.image}' className="image"/></div>
<hr></hr>
</div>
)
})
}
</dl>
<button className="addButton" onClick={() =>
{this.setState({ display: !this.state.display })}}>
Add Recipe
</button>
<AddRecipe addRecipe={this.addRecipe}
display={this.state.display} />
</div>
);
}
}
export default App;
In home function it directs the page to ('/recipe') that is the file store.js
import React, { Component } from 'react';
import AddRecipe from './addrecipe.js';
var StorePicker = React.createClass({
render : function() {
return (
<form className="store-selector">
<h2>{recipe.name}</h2> --->//gives error recipe is not defined.
</form>
)
}
});
export default StorePicker;
How do I display recipe.name,ingredients,image in the new page given by ('/recipe').There is another file addrecipe.js that creates a form to take the input from user.
This is my index.js file--
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import AddRecipe from './addrecipe';
import StorePicker from './store';
import App from './container'
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Navigation = ReactRouter.Navigation;
import createHistory from 'history/createBrowserHistory'
var routes = (
<Router history={createHistory()}>
<switch>
<Route exact={true} path="/recipe" component={StorePicker} />
<Route exact={true} path="/" component={App}/>
</switch>
</Router>
);
ReactDOM.render(routes, document.getElementById('root'));