Algolia autocomplete widget doesn't return the "query" value? Why

Question

I trying to implement Algolia Autocomplete widget in my code. I'm currently trying to retrieve the prop "value" by using the query callback.

I'm using the Algolia code here: https://www.algolia.com/doc/guides/building-search-ui/resources/ui-and-ux-patterns/in-depth/autocomplete/react/

When I'm trying to return "query" in the console --> console.log(query) I get an undefined error. I can't understand why.

Here's my entire code:

App.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import algoliasearch from "algoliasearch/lite";
import {
    InstantSearch,
    Configure,
    Hits,
    Highlight,
    connectSearchBox,
} from "react-instantsearch-dom";
import Autocomplete from "./autocomplete";
import "./App.css";

const VirtalSearchBox = connectSearchBox(() => null);

const searchClient = algoliasearch(
    "Z62FGCMHZD",
    "9a68937c02faa1182e49eb5c0737e009",
);

class App extends Component {
    state = {
        query: "",
    };

    onSuggestionSelected = (_, { suggestion }) => {
        this.setState({
            query: suggestion.name,
        });
    };

    onSuggestionCleared = () => {
        this.setState({
            query: "",
        });
    };

    render() {
        const { query } = this.state;

        return (
            <div className="container">
                <h1>React InstantSearch - Results page with autocomplete</h1>
                <InstantSearch indexName="Radium_test" searchClient={searchClient}>
                    <Configure hitsPerPage={5} />
                    <Autocomplete
                        onSuggestionSelected={this.onSuggestionSelected}
                        onSuggestionCleared={this.onSuggestionCleared}
                    />
                </InstantSearch>
                {console.log(query)}
            </div>
        );
    }
}

function Hit(props) {
    return (
        <div>
            <Highlight attribute="section_text" hit={props.hit} />
        </div>
    );
}

Hit.propTypes = {
    hit: PropTypes.object.isRequired,
};

export default App;

Autocomplete.jsx

import React, { Component } from "react";
import PropTypes from "prop-types";
import { Highlight, connectAutoComplete } from "react-instantsearch-dom";
import AutoSuggest from "react-autosuggest";

class AutoComplete extends Component {
    static propTypes = {
        hits: PropTypes.arrayOf(PropTypes.object).isRequired,
        currentRefinement: PropTypes.string.isRequired,
        refine: PropTypes.func.isRequired,
        onSuggestionSelected: PropTypes.func.isRequired,
        onSuggestionCleared: PropTypes.func.isRequired,
    };

    state = {
        value: this.props.currentRefinement,
    };

    onChange = (_, { newValue }) => {
        if (!newValue) {
            this.props.onSuggestionCleared();
        }

        this.setState({
            value: newValue,
        });
    };

    onSuggestionsFetchRequested = ({ value }) => {
        this.props.refine(value);
    };

    onSuggestionsClearRequested = () => {
        this.props.refine();
    };

    getSuggestionValue(hit) {
        const searchResult = hit.section_number + "  " + hit.section_text;
        return searchResult;
    }

    renderSuggestion(hit) {
        return (
            <div className="row">
                <div className="col-1" style={{ paddingLeft: "20px" }}>
                    <Highlight attribute="section_number" hit={hit} tagName="em" />
                </div>
                <div className="col-11">
                    <Highlight attribute="section_text" hit={hit} tagName="em" />
                </div>
            </div>
        );
    }

    render() {
        const { hits, onSuggestionSelected } = this.props;
        const { value } = this.state;

        const inputProps = {
            placeholder: "Search for a product...",
            onChange: this.onChange,
            value,
        };

        return (
            <div>
                <AutoSuggest
                    suggestions={hits}
                    onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                    onSuggestionsClearRequested={this.onSuggestionsClearRequested}
                    onSuggestionSelected={onSuggestionSelected}
                    getSuggestionValue={this.getSuggestionValue}
                    renderSuggestion={this.renderSuggestion}
                    inputProps={inputProps}
                />
            </div>
        );
    }
}

export default connectAutoComplete(AutoComplete);

Answer 1

After a few tries, I resorted to asking directly to Algolia.

Here's the Sandbox they sent me:

https://codesandbox.io/s/quirky-darwin-4u2o2?file=/src/App.js

The problem is with the "newValue" prop. You need to replace it with "suggestion" and set the state to "suggestion.valueToReturn".