Using input textbox in react to show a dropdown of suggestions - reactjs

Question

I have a list of topics and groups being returned from an API call. Topics belongs to at least 1 or more groups. The topics are currently filtered by the groups that are selected. Each group selected is set or removed in the selectedGroups state. I have an input search box which is used to help the user find a topic, when they start typing in the textbox I want a dropdown just below showing if any topic titles match their search input. When they click that topic it should only show that topic in the topics state.
Example.. if I type..
"Jo"
We get a dropdown of topics just below as suggestions and should render as in the dropdown:-
John..
Johnny..
Joan..
etc
Then when we click one of these topics in the dropdown, the state for topics update. So yes it will just show one topic in this case.
I have the search input and onchange method called handleInputChange
I am getting an error: Property 'search' does not exist on type 'PracticeAreas'. and not sure where I should be heading towards getting this to work correctly. Any help would be really grateful, thanks
I have included example data from the API call
And the react script
Main:
import * as React from 'react';
import './PracticeAreas.css';
import IReportGroup from 'src/model/IReportGroup';
import { Loader } from '../loader/Loader';
import Suggestions from './Suggestions'
export interface IGroupTopics {
id: string
name: string,
groups: string[]
}
interface IOwnProps {
}
interface IOwnState {
groups: IReportGroup[],
topics: IGroupTopics[],
selectedGroups: IReportGroup[],
query: string,
}
class PracticeAreas extends React.Component<IOwnProps, IOwnState> {
constructor(props: IOwnProps) {
super(props);
this.state = {
groups: [],
topics: [],
selectedGroups: [],
query: ""
}
}
public render() {
const { topics } = this.state;
return topics.length > 0 ?
this.renderData(topics) :
<Loader />
}
public renderData(data: any) {
return (
<div className="col-md-12 practiceAreas">
<h1>Practice Areas</h1>
<div className="selection-refinement">
<div className="refinement-search">
<form>
<input
placeholder="Search for..."
ref={input => this.search = input}
onChange={this.handleInputChange}
/>
<Suggestions topics={this.state.topics} />
</form>
</div>
</div>
<ul className="list-inline groupedTags">
{this.state.groups.map((item,i) =>
<li key={i}>
<a className={"navigator-tags " + (this.groupInState(item) ? "active" : "")} onClick={() => this.setSelectedGroups(item)}>
{item.name}
</a>
</li>
)}
</ul>
<div className="row practiceAreasContainer">
{this.state.topics.filter(topic => this.topicInGroupSelection(topic)).map((item,i) =>
<div key={i} className="result">
<div className="col-md-6 result-item">
<div className="item-container default shadowed item-content highlight row">
<div className="col-sm-12 no-padding">
<p>Editor: John Sinclair, Eric Draven, Coco Zames</p>
<p>Beiten Burkhardt</p>
<div className="row no-margin">
<div className="col-12 col-sm-10 text-content">
<h3>
<a href="#" >{item.name}</a>
</h3>
<p className="summary">
Summary
</p>
</div>
<div className="col-10 col-sm-2 links-container rhs">
Compare
<div className="divider" />
View
</div>
</div>
</div>
</div>
</div>
</div>
)}
</div>
<div className="row text-center">
<a className="lex-primary-btn medium-btn">Load more</a>
</div>
</div>
);
}
public handleInputChange = () => {
this.setState({
query: this.search.value
}, () => {
if (this.state.query && this.state.query.length > 1) {
// this.showDropdown()
if (this.state.query.length % 2 === 0) {
this.state.topics
}
} else if (!this.state.query) {
// this.hideDropdown()
}
})
}
public componentDidMount() {
fetch(`.../api/v2/navigator/reports/topics`, {
method: "GET",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
}})
.then((res) => res.json()
.then((data) => {
this.setState({
groups: data.groups,
topics: data.data
});
}));
}
public setSelectedGroups = (group: IReportGroup) => {
// remove from state
if (this.groupInState(group)) {
this.setState(state => ({
selectedGroups: state.selectedGroups.filter(t => t.id !== group.id)
}));
// set state
} else {
this.setState(previousState => ({
selectedGroups: [...previousState.selectedGroups, group]
}));
}
}
public topicInGroupSelection = (topic: IGroupTopics) => {
return (this.state.selectedGroups.length > 0 ? this.state.selectedGroups.some(item => topic.groups.some(group => group === item.id)) : true)
}
public groupInState = (group: IReportGroup) => {
return this.state.selectedGroups.some(item => group.id === item.id);
}
}
export default PracticeAreas
Suggestions (which should topics in the state):
import * as React from 'react';
const Suggestions = (props) => {
const options = props.topics.map(r => (
<li key={r.id}>
{r.name}
</li>
))
return <ul>{options}</ul>
}
export default Suggestions
Data ex:
<ReportSelectionCriteriaResponse xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/">
<Data xmlns:d2p1="http://schemas.datacontract.org/2004/07/">
<d2p1:NavigatorReportSelection>
<d2p1:About>test title 4</d2p1:About>
<d2p1:Groups xmlns:d4p1="http://schemas.microsoft.com/2003/10/Serialization/Arrays">
<d4p1:guid>d21384b5-27be-4bfc-963d-0d2ad40dbbfb</d4p1:guid>
</d2p1:Groups>
<d2p1:Id>2fb2783c-f48e-4d49-8098-0d39e4a16e7a</d2p1:Id>
<d2p1:Name>Test</d2p1:Name>
<d2p1:ParentId i:nil="true"/>
<d2p1:Selected>false</d2p1:Selected>
<d2p1:Type>Topics</d2p1:Type>
<d2p1:Visible>true</d2p1:Visible>
</d2p1:NavigatorReportSelection>
<d2p1:NavigatorReportSelection>
<d2p1:About i:nil="true"/>
<d2p1:Groups xmlns:d4p1="http://schemas.microsoft.com/2003/10/Serialization/Arrays">
<d4p1:guid>2fb2783c-f48e-4d49-8098-0d39e4a16e7a</d4p1:guid>
</d2p1:Groups>
<d2p1:Id>47cb7f1d-2267-426c-9f7f-0df3b9291fb7</d2p1:Id>
<d2p1:Name>Another test topic</d2p1:Name>
<d2p1:ParentId i:nil="true"/>
<d2p1:Selected>false</d2p1:Selected>
<d2p1:Type>Topics</d2p1:Type>
<d2p1:Visible>true</d2p1:Visible>
</d2p1:NavigatorReportSelection>
</Data>
<Groups xmlns:d2p1="http://schemas.datacontract.org/2004/07/">
<d2p1:NavigatorReportSelectionGroup>
<d2p1:Focused>false</d2p1:Focused>
<d2p1:Id>2fb2783c-f48e-4d49-8098-0d39e4a16e7a</d2p1:Id>
<d2p1:Name>Allan's Test group</d2p1:Name>
<d2p1:Order>0</d2p1:Order>
<d2p1:Type>Topics</d2p1:Type>
</d2p1:NavigatorReportSelectionGroup>
<d2p1:NavigatorReportSelectionGroup>
<d2p1:Focused>false</d2p1:Focused>
<d2p1:Id>47cb7f1d-2267-426c-9f7f-0df3b9291fb7</d2p1:Id>
<d2p1:Name>Another test topic group</d2p1:Name>
<d2p1:Order>1</d2p1:Order>
<d2p1:Type>Topics</d2p1:Type>
</d2p1:NavigatorReportSelectionGroup>
</Groups>
</ReportSelectionCriteriaResponse>