Function not defined while passing child data to parent - reactjs

Question

I am trying to pass a query from a child component to a parent component where my parent component can complete an api call. I have search online and found that people have been creating a function in the parent component and calling it in the child component to pass the data via props but my code is not working. When i try the solutions suggested I get a call that my function getArtistName() is not defined in the child component. I am new to react and would like to know why and how this code works.
Parent component
class App extends Component {
state = {
items: [],
didLoad: false,
query: ''
}
async grabArtistInfo() {
const url = `https://api.songkick.com/api/3.0/artists/4971683/calendar.json?apikey=${myKey}`
const response = await fetch(url);
const data = await response.json();
this.setState({items:data, didLoad:true});
console.log(this.state.items)
}
async componentDidMount() {
this.grabArtistInfo()
}
getArtistName = (artist) => {
this.setState({query: artist});
console.log(this.state.query);
}
render() {
if (this.state.didLoad == true) {
return (
<div className="App">
<Header q = {(fromChild) => this.getArtistName(fromChild)} />
<Element name = 'Featured'>
<Featured
deadline = {this.state.items.resultsPage.results.event[0].start.datetime}
/>
</Element>
<Element name = "Venue_info">
<VenueInfo/>
</Element>
<Element name = "Highlights">
<Highlights/>
</Element>
<Element name = "Pricing">
<Pricing/>
</Element>
<Element name = "Location">
<Location
lng = {this.state.items.resultsPage.results.event[0].venue.lng}
lat = {this.state.items.resultsPage.results.event[0].venue.lat}
desc = {this.state.items.resultsPage.results.event[0].venue.displayName}
locationDetails = {this.state.items.resultsPage.results.event[0].location.city}
/>
</Element>
<Footer/>
</div>
);
}
else {
return (
<div>Loading ... </div>
)
}
}
}
export default App;
Child component
class Header extends Component {
constructor(props) {
super(props);
this.state = {
drawerOpen: false,
headerShow: false,
fromChild: ''
};
}
componentDidMount(){
window.addEventListener('scroll',this.handleScroll);
}
handleScroll = () => {
if(window.scrollY > 0){
this.setState({
headerShow: true
})
} else {
this.setState({
headerShow: false
})
}
}
toggleDrawer = (value) => {
this.setState({
drawerOpen: value
})
}
handleChange = (e) => {
if(e.keyCode == 13){
this.setState({query: e.target.value})
this.props.getArtistName(this.state.query)
} else {
this.setState({ query: e.target.value });
}
}
render() {
return (
<AppBar
position="fixed"
style={{
backgroundColor: this.state.headerShow ? '#2f2f2f' : 'transparent',
boxShadow: 'none',
padding: '10px 0px'
}}
>
<Toolbar>
<div className="header_logo">
<div className="font_righteous header_logo_venue">Musical Events</div>
<div className="header_logo_title">Countdown</div>
</div>
<div style = {searchStyle}>
<InputBase
placeholder= "Search…"
inputProps= {{
'aria-label': 'search',
style:{color: "white"}
}}
value = {this.state.query}
onChange = {this.handleChange}
onKeyDown = {this.handleChange}
>
</InputBase>
</div>
<IconButton
aria-label="Search"
color = "inherit"
onClick = {() => console.log(this.state.query)}
>
<SearchIcon/>
</IconButton>
<IconButton
aria-label="Menu"
color="inherit"
onClick={()=> this.toggleDrawer(true)}
>
<MenuIcon/>
</IconButton>
<SideDrawer
open={this.state.drawerOpen}
onClose={(value)=> this.toggleDrawer(value)}
/>
</Toolbar>
</AppBar>
);
}
}
export default Header;
For reference I am using materialUI in react to create the search bar. The query state is fulfilling its purpose but passing it into the parent component is proving quite challenging

Answer 1

You passed your getArtistName in q so you need to access through this.props.q
handleChange = (e) => {
if(e.keyCode == 13){
this.setState({query: e.target.value})
this.props.q(this.state.query)
} else {
this.setState({ query: e.target.value });
}
}