create a prop on the child element that calls a function
import React from "react"; import SearchBar from "./SearchBar"; class App extends React.Component { onSearchSubmit(term) { console.log(term); } render() { return ( <div className="ui container" style={{ marginTop: "10px" }}> <SearchBar onSubmit={this.onSearchSubmit} /> </div> ); } } export default App;
pass the data in the child component to the function that was passed down as a prop
import React from "react"; class SearchBar extends React.Component { state = { term: "" }; onFormSubmit = (event) => { event.preventDefault(); //the arrow function makes sure the value of this is the same as our instance of the Searchbar // call props with this.props as its a class-based component! // invoking a parents function by calling a function that was sent into the child as a prop this.props.onSubmit(this.state.term); }; render() { return ( <div className="ui segment"> <form onSubmit={this.onFormSubmit} className="ui form"> <div className="field"> <label htmlFor="searchfield">Search term</label> <input name="searchfield" type="text" placeholder="fill in your searchterm" value={this.state.term} onChange={(e) => this.setState({ term: e.target.value })} /> </div> </form> </div> ); } } export default SearchBar;
App.js now got the search term that was filled in child component!