Here's the code snippet I am working on:
Search.tsx
import * as React from 'react';
import axios from 'axios'
import Suggestions from './Suggestions'
const API_KEY:string = "process.env"
const API_URL:string = 'http://127.0.0.1:9001/v1/test'
export class Search extends React.Component{
state = {
query: '' as string,
results : [] as any[]
}
search = {
value: '' as string,
}
getInfo = () => {
axios.post(`${API_URL}/${this.state.query}/`)
.then(({ data }) => {
this.setState({
results: data.data
})
})
}
handleInputChange = () => {
this.setState({
query: this.search.value
}, () => {
if (this.state.query && this.state.query.length > 1) {
if (this.state.query.length % 2 === 0) {
this.getInfo()
}
} else if (!this.state.query) {
}
})
}
render() {
return (
<form>
<input
placeholder="Search for..."
ref={input => this.search = input}
onChange={this.handleInputChange}
/>
<Suggestions results={this.state.results} />
</form>
)
}
}
export default Search
Suggestion.tsx :
import * as React from 'react';
import { any } from 'prop-types';
export const Suggestions = (props:any) => {
const options = props.results.map((r: { id: React.Key; name: React.ReactNode; }) => (
<li key={r.id}>
{r.name}
</li>
))
return <ul>{options}</ul>
}
export default Suggestions
I encountered a Uncaught TypeError: e.results.map is not a function error.
https://i.sstatic.net/x0G8d.png
The issue seems to be with mapping the result in suggestion component. How can I correct this?
The result obtained from the API is:
{'data': {'0': 'toto', '1': 'titi'}}
I'm unsure how to properly map the result from the API call to the suggestion component.