I've been trying to get semantic ui search results to appear, but for the life of me, all I get when searching is this:
As you can see, the search results are not visible
I have imported the semantic-ui-css in my index.js file:
import "semantic-ui-css/semantic.min.css";
I'm using a super basic data set to test:
const cities = [
{
key: 0,
city: "New York City",
usState: "New York"
},
{
key: 1,
city: "San Francisco",
usState: "California"
},
{
key: 2,
city: "Chicago",
usState: "Illinois"
}
];
(this array comes after the imports but is included above to keep the code section shorter)
and am using the standard search from the docs:
import React from "react";
import { Search } from "semantic-ui-react";
import _ from "lodash";
class SearchBox extends React.Component {
state = {
isLoading: false,
results: [],
value: ""
};
componentWillMount() {
this.resetComponent();
}
resetComponent = () =>
this.setState({ isLoading: false, results: [], value: "" });
handleSearchChange = (e, { value }) => {
this.setState({ isLoading: true, value });
setTimeout(() => {
if (this.state.value.length < 1) this.resetComponent();
const re = new RegExp(_.escapeRegExp(this.state.value), "i");
const isMatch = result => re.test(result.city);
this.setState({
isLoading: false,
results: _.filter(cities, isMatch)
});
}, 500);
};
handleResultSelect = (e, { result }) =>
this.setState({ value: result.city });
render() {
const { isLoading, results, value } = this.state;
return (
<div>
<Search
type="text"
size="big"
loading={isLoading}
results={results}
value={value}
onSearchChange={this.handleSearchChange}
onResultSelect={this.handleResultSelect}
/>
</div>
);
}
}
export default SearchBox;
I've even tried using my array as the data when editing the semantic-ui-react Search example, but for some reason the results aren't visible there either. How can I make the search results visible?
Thanks in advance for any comments or answers!
try to check correct props for SearchResult, because default SearchResult component should use the object with one of this keys: title, description, price, image.
see [https://react.semantic-ui.com/modules/search#search-example-standard][1]