Unable to update react state with an array

Question

I can make a successful call to getApiSuggestions with data returned. However I'm unable to assign this to my state.

As you can see my console output shows that the value for response has an array. However, when attempting to assign it to wikiResults:response the array remains empty.

note that this is a modification of react-search-autocomplete

Am I attempting to pass the variables incorrectly?

NarrativeSearch.js

import React, {useContext, useState, useEffect} from "react";
import './search.css'
import { ReactSearchAutocomplete } from 'react-search-autocomplete'
import { getApiSuggestions } from '../../requests/requests';
import {TextSearchContext} from "../../contexts/TextSearchContext"
import {SearchContext} from "../../contexts/SearchContext"



function Search() {
    const {textFilterState, setTextFilterState} = useContext(TextSearchContext);
    const [wikiTitleResults, setWikiTitleResults] = useState({wikiResults:[]});




    var cnJson = wikiTitleResults;

  const items = wikiTitleResults.wikiResults;

    const handleOnSearch = (string, results) => {
        console.log("STRING: ", string)
        getApiSuggestions(string).then(response => {

            console.log("RESPONSE: ", response);
            setWikiTitleResults({wikiResults:response});  //<---- This doesn't update the state
            console.log("WikiTitle: ", wikiTitleResults.wikiResults);
            console.log("Items: ", items);

        })


    }

  const handleOnHover = (result) => {
    // the item hovered
    console.log(result)
  }

  const handleOnSelect = (item) => {
    // the item selected
        setTextFilterState({textFilter:item.name});
    console.log(item)
  }

  const handleOnFocus = () => {
    console.log('Focused')
  }

    const handleOnClear = () => {
    setTextFilterState({textFilter:""});
  }

  const formatResult = (item) => {
        return (
      <>
        <span style={{ display: 'block', textAlign: 'left' }}>id: {item.title}</span>

      </>
    )
  }

  return (
    <div >

        <div className="searchbar">
                <ReactSearchAutocomplete
                    items={items}
                    onSearch={handleOnSearch}
                    onHover={handleOnHover}
                    onSelect={handleOnSelect}
                    onFocus={handleOnFocus}
                    onClear={handleOnClear}
                    styling={{ zIndex: 4 }} // To display it on top of the search box below
                    autoFocus
                />
        </div>

    </div>
  )
}

export default Search

getApiSuggesetions

const getApiSuggestions = (title) => {
    //console.log("URL Being called"+ urlSingleResult);
    //console.log(title);
    let result = urlMultiResult
        .get(`${title}`)
        .then((response) => {
            console.log(Object.values(response.data.query.pages))
            return Object.values(response.data.query.pages);
        })
        .catch((error) => {
            return error;
            console.log(error);
        });
    console.log(result);
    return result;
};

Answer 1

I fixed this by including a useEffect and a context from the parent component.

function Search() {
    const {textFilterState, setTextFilterState} = useContext(TextSearchContext);
    const {wikiTitleResults, setWikiTitleResults} = useContext(SearchContext);

    var items = wikiTitleResults.wikiTitles;

    useEffect(() => {
                const fetchData = async () => {
                    const data = await getApiSuggestions(textFilterState.textFilter)
                    setWikiTitleResults({wikiTitles:data})
                }
                fetchData();
                },

             [textFilterState])

    const handleOnSearch = (string, results) => {
        setTextFilterState({textFilter:string});
    }