I accept text input from a search bar and setState to text but its only one character at a time how can I continue to update and add to the state rather than replace what's in state? I feel like this is the intended action but my code does not do this. 

```js
class FindRecipesScreen extends Component {
  static navigationOptions = {
    title: "Find Recipes",
    header: null
  };
  constructor(props) {
    super(props);
    this.state = {
      search: "",
      recipe: "",
      text: "",
    };
  }
  backToHomePage = () => {
    this.props.navigation.navigate("Home");
  };
  componentDidMount() {
    this.props.getRecipeList(this.props.auth.jwt);
  }
  handleSearch = text => {
    console.log("text", text);
    this.setState({text: text});
  };
  render() {
    return (
      <View style={styles.recipe}>
        <View style={styles.recipeBar}>
          <ActionNavbar title="Find Recipes"
                        leftAction={this.backToHomePage}
                        leftIcon={require("app/assets/icons/cancel.png")}
                        rightAction={this.backToHomePage}
                        rightIcon={require("app/assets/icons/filter.png")}/>

        </View>
        <View>
          <View>
            <SearchBar
              containerStyle={styles.searchContainer}
              inputContainerStyle={styles.searchInputContainer}
              inputStyle={styles.searchInput}
              lightTheme
              searchIcon={searchIcon}
              round
              onChangeText={this.handleSearch}
              placeholder="Search Cookbooks"
            />
            <View style={styles.forward}>
              <Image
                style={styles.forwardIcon}
                width={18}
                height={18}
                source={require("app/assets/icons/forward.png")}
              />
            </View>
          </View>
        </View>
      </View>
    );
  }
}
```