reactjs - How do I pass up the value inside of react-autosuggest to the parent component? -

in app.js, have this

render() {   return (     <div id="app">       <searchbar />     </div>   ); } 

and inside of searchbar, import react-autosuggest , have -

render() {   const { value, suggestions } = this.state;   const inputprops = {     placeholder: "search",     value,     onchange: this.onchange   };    return (     <autosuggest        style={style}       suggestions={suggestions}       onsuggestionsfetchrequested={this.onsuggestionsfetchrequested}       onsuggestionsclearrequested={this.onsuggestionsclearrequested}       getsuggestionvalue={getsuggestionvalue}       rendersuggestion={rendersuggestion}       inputprops={inputprops}       onsubmit={this.dosomething}       />   ); } 

where these functions standard boilerplate functions react-autosuggest uses. how access searched inside of searchbar inside of it's parent, app.js?

you can use props raise data autosuggest events parent component. create method inside app , pass down prop searchbar component. then, call autosuggest event.

app

class app extends react.component {   onsubmit(e) {     // `e` data passed through `autosuggest` event.     console.log(e);   }    render() {     return (       <div id="app">         <searchbar onsubmit={this.onsubmit} />       </div>     );   } } 

searchbar

<autosuggest onclick={this.props.onsubmit} />