Problem passing data between React components

help
1

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:

“App.jsx”

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

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

“List.jsx”

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

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


“Authenticated.jsx”

const authenticatedRoutes = FlowRouter.group( { 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!