Returning a function value to a react Component

Question

What I'm trying to do is to pass a result of an API call to a React Component and create a List from it.

What I dont know is how to pass value inside a function to the component? Do I need to have state for it?

searchMealsHandler(event) {
    if (event.target.value.length > 2) {
        let findMeals = fetch(`https://api.edamam.com/api/food-database/v2/parser?ingr=${event.target.value}&app_id=${appID}&app_key=${appKey}`)
            .then(res => res.json())
            .then(result => result.hints);

        return findMeals;
    }
}

render() {
    return (
        <div>
            <SearchMeal search={this.searchMealsHandler} />
            <MealList list="how to pass it here" />
            <SelectedMeals />
        </div>
    )
}

Answer 1

Yes you need to create state for your list, and then update it with setState after fetch finished