javascript - Pass props to the main component from child (React Native) -

i have 2 components. first component main component , has title 'select'/'unselect'

export default class contacts extends react.component {   constructor(props) {     super(props);     this.state = { check: 0 };   }    oneitem() {     this.setstate({ check: this.state.check === 0 ? 1 : 0 });   }      render() {       const { check } = this.state;       const infouserlists = userlist;       const datauserlist = infouserlists.map((infouserlist, index) => <infouserlist         key={`infu_${index + 1}`}         infouserlist={infouserlist}         selectall={this.state.check}       />);       return (         <view>               <view>                 <touchableopacity onpress={() => this.oneitem()}>                   <normaltext label={check === 0 ? 'select all' : 'unselect'} />                 </touchableopacity>               {datauserlist}         </view>       );   }  } 

also have child component, , when user clicks on "onpush" function - title select all/unselect should changes. user clicks on "infouserlist" component, state of title changed in main "contacts" component.

export default class infouserlist extends react.component {   constructor(props) {     super(props);     this.state = { check: 0, label: 'select all' };   }    onpush() {     this.setstate({ check: this.state.check === 0 ? 1 : 0 });   }    render (){     const { infouserlist, selectall } = this.props;     const { check } = this.state;     return (       <view key={infouserlist.name}>         <touchableopacity onpress={() => this.onpush()}>           <image source={ check === 1 || selectall === 1 ? iconslnk.choose : iconslnk.plus } />         </touchableopacity>       </view>     );   } } 

to inform parent of child change, need pass event handler parent child, have child call event handler method when event occurs.

1. define event handler in parent.

   oninfouserlistcheckchange() { // here }

note: may need bind event handler in parent constructor access this.

this.oninfouserlistcheckchange = oninfouserlistcheckchange.bind(this); 

2. raise event child.

   onpush() { //... if (this.props.oncheckchange) { this.props.oncheckchange( //the checked value); }
   }

3. pass handler child parent

   < infouserlist oncheck={this.oncheckchange} />