MultiList/MultiDropdownList not showing or throwing errors in React

Question

I have been struggling to get some of the faceted search options working in ReactiveSearch/ReactiveBase.

When trying to get the MultiList or MultiDropdownList working, nothing shows where it should, and there are no error messages in Dev Tools whatsoever.

The SingleRange section works perfectly fine, but I can't get any of the text MultiList features working.

Here is my entire 'render' section, just in-case there is something simple that I have missed:

render() {
    return (
        <ReactiveBase
            app="properties"
            url="http://<el-server-ip>:9200">
            <CategorySearch
                    componentId="searchbox"
                    dataField={["PropertyType","County"]}
                    categoryField="Country"
                    autoSuggest={true}
                    fuzziness={0}
                    queryFormat="and"
                    placeholder="Search for properties"
            />
            <SingleRange
                    componentId="ratingsfilter"
                    title="Filter by ratings"
                    dataField="Price_Unformatted"
                    data={[
                        {"start": 0, "end": 500000, "label": "0 - 500k"},
                        {"start": 500000, "end": 1000000, "label": "500k - 1m"},
                        {"start": 1000000, "end": 10000000, "label": "1m - 10m"},
                        {"start": 0, "end": 1000000000000, "label": "10m+"},
                    ]}
                />
            <MultiList
              componentId="TypeSensor"
              dataField="PropertyType.raw"
              title="Type"
            />
                <ResultCard
                    componentId="result"
                    title="Results"
                    dataField="PropertyType"
                    from={0}
                    size={15}
                    pagination={true}
                    react={{
                        and: ["searchbox", "ratingsfilter","TypeSensor"]
                    }}
                    onData={(res) => {
                        return {
                            image: res.PicNumber,
                            title: res.PropertyType,
                            description: res.Description_EN.substr(0,100)
                        }
                    }}
            />
        </ReactiveBase>
    );
}

And to give you an idea of the sort of data that I am working with, just in-case there is a type mismatch causing the error:

"_source": {
                "objectID": 211956,
                "Continent": "Europe",
                "Country": "France",
                "County": "Aude ",
                "Location": "Carcassonne",
                "Area": null,
                "Price": "EUR 890,000",
                "Price_Unformatted": 890000,
                "PropertyType": "Chateau",
                "Bedrooms": 9,
                "Bathrooms": 6,
                "PicNumber": "file.jpg",
                "Description_EN": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...",
                "Currency": "EUR",
            }

Is there any way of getting some sort of output/error message from React or ReactiveSearch in this case, so that I can accurately see what the issue is?

I have seen errors previously, though those were mostly syntax.

Answer 1

A MultiList has to run aggregations on the dataField provided. From the mappings you should use the keyword type so an aggregation can be run on it. So the if you update the multifield to .keyword instead of .raw here it should work:

<MultiList
  componentId="TypeSensor"
  dataField="PropertyType.keyword"
  title="Type"
/>