Problem passing data between React components

I’m sure this must be obvious to many of you, but I cannot figure out how to pass some data from one component to another in my app. I have tried many approaches (state, props, session variable) in many configurations, but I cannot seem to get it right. Here is a pseudo-code version of my component structure:


getView() {
	return ? this.props.yield : <CJHome />;

render() {
	<App />
		<AppHeader />
			<DisplayListTitle />
				<h1>List Title</h1>
		<main className='container'>
			{ ? this.loading() : this.getView()}


handleClick(event) {
	FlowRouter.go(FlowHelpers.pathFor( 'list', { projectId: } ));

render() {
	<List />
				<a href=“#” id={item._id}  onClick={this.handleClick}>Stuff</a>


const authenticatedRoutes = { name: 'authenticated' } );

authenticatedRoutes.route( '/list/:projectId?', {
	name: 'list',
	action( params ) {
		let theList = (params.projectId ? params.projectId : 'All');
		ReactLayout.render( App, { yield: <List CurrentList={theList} />} );

I need to click on the “Stuff” anchor in my List component and have the ID available in the DisplayListTitle component. Being a newbie, I probably set myself up for this problem with the structure, but I didn’t know any better at the time! I will eventually rewrite this from scratch in a better way, but for now I just want to get my title to the header.

Any suggestions about how to fix this?

Thank you!