SearchBar search - reactjs

Question

I'm trying to create a library app and I want to be able to search stories by their title. I created a search bar from the SearchBar component, but I don't know when to call a used defined function that allows me to get the books with the searched word.
Could anyone tell me the prop we need to use? More specifically, how do I know the little magnifying glass on the left is clicked? Thank you!
render() {
var count = 0
var title = "";
var author = "";
return(
<ScrollView>
<View>
<Header
backgroundColor = {"#b7e4c7"}
centerComponent = {{
text:"Available stories",
style: {
color:'white',
fontSize:20,
fontWeight:'bold'
}
}}/>
<SearchBar
lightTheme
containerStyle = {{marginTop:5}}
placeholder="Which book would you like to search"
onChangeText={text =>
{this.setState({search:text})}}
value ={this.state.search}
/>
{this.state.tas.map((element) => {
count = count + 1
if(count%2 == 1) {
title = element;
}
else {
author = element;
return(
<TouchableOpacity style = {styles.storyButton} key = {element}>
<Text style = {styles.buttonText}>Title: {title}</Text>
<Text style = {styles.buttonText}>Author: {author}</Text>
</TouchableOpacity>
)
}
})}
</View>
</ScrollView>
)
}

Answer 1

Please have a look at fetchDetails and onChangeText
import React from "react";
import "./styles.css";
export default class App extends React.Component {
// state init
fetchDetails = () =>{
const search = this.state.search
//DO fetch
}
render() {
var count = 0
var title = "";
var author = "";
return(
<ScrollView>
<View>
<Header
backgroundColor = {"#b7e4c7"}
centerComponent = {{
text:"Available stories",
style: {
color:'white',
fontSize:20,
fontWeight:'bold'
}
}}/>
<SearchBar
lightTheme
containerStyle = {{marginTop:5}}
placeholder="Which book would you like to search"
onChangeText={text =>{
this.setState({search:text})
this.fetchDetails()
}}
value ={this.state.search}
/>
{this.state.tas.map((element) => {
count = count + 1
if(count%2 == 1) {
title = element;
}
else {
author = element;
return(
<TouchableOpacity style = {styles.storyButton} key = {element}>
<Text style = {styles.buttonText}>Title: {title}</Text>
<Text style = {styles.buttonText}>Author: {author}</Text>
</TouchableOpacity>
)
}
})}
</View>
</ScrollView>
)
}
}