I am trying to make use of this guide to create a dropdown refinementlist instead of the default. I first created a Dropdown.js with contents form here
import React, { Component } from 'react';
import { connectRefinementList } from 'react-instantsearch/connectors';
import PropTypes from 'prop-types';
const cx = label => `ais-DropdownRefinementList-${label}`;
/// Rest of the code from the above link follows
export default connectRefinementList(DropdownRefinementList);
I then import it into my search.js component, which builds my interface like so:
import { DropdownRefinementList} from "./Dropdown"
And use it like so:
<DropdownRefinementList attribute="major" />
This gives me the following error:
×
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `SearchGrid`.
SearchGrid is just my search component. The issue goes away when I remove <DropdownRefinementList attribute="major" />, so that has to be the problem.
Is there something wrong with my implementation? How can I fix this?
It should be import DropdownRefinementList from "./Dropdown"
This is because you're exporting default from your Dropdown.js file.