reactjs - how do i pass data between views in react js -

i have 2 views. 1 left nav has list of items other main screen need change depending on item select.

here toggle function change "name" i'm trying update

ontogglefilter(checked) {     let d = this.props.data     this.setprojectname(d.id)     //console.log("name" + d.id)     d.onfilter = checked     if( d.children && d.children.length > 0 ) {         d.children.foreach( item => {             item.onfilter = checked         })     }     this.setstate({ selected: checked })     if( this.props.onfilterchanged ) {         this.props.onfilterchanged(checked)          } }  setprojectname (data){     console.log ("name" + data)     let projectname = data  } 

that consoles out name remarkable (thats 1 of projects on left nav)

somehow need pass projectname component. i'm new react , i'm sure simple reading documentation i'm little stuck.

ok think know how first part:

i have data service file has function

getnavinfo (){           _instance.navdata = navarray          console.log ("instance hit"+ navarray)      } 

this picks on array of items set elsewhere in file

here call on other component

getdatanav ()      {         let d = this.dataservice.getnavinfo()         console.log ("d here" + d)     } 

dataservice other component.

when though

this.dataservice.getnavinfo().then(this.getdatanav)  getdatanav (data)      {             console.log ("d here" + data);     } 

its telling me undefined -

this.dataservice.getnavinfo().then(this.getdatanav) 

you can have app.js parent of leftnav, , mainscreen component. pass state of parent down children props.

<app>   <leftnav selected={this.state.projectname} handletoggle={ //... when item been clicked, change projectname in state of app }>   <mainscreen projectname={this.state.projectname}> </app> 

... replace projectname id or like