Having trouble updating state in React after API call - reactjs

Question

I am trying to create a textbox with an autocomplete feature that pulls suggestions from an API but having trouble updating the state after I receive the array from the API. I am modifying code from here: https://blog.bitsrc.io/building-a-react-autocomplete-component-from-scratch-b78105324f4c
I think I have to use ComponentDidMount() but I am not sure how to apply it to an onChange Function.
class App extends React.Component {
render() {
return (
<div className="App">
<Autocomplete/>
</div>
);
}
}
class Autocomplete extends React.Component{
state = {
activeOption: 0,
filteredOptions: [],
showOptions: false,
userInput: ''
};
onChange = (e) => {
const userInput = e.currentTarget.value;
fetch("/places", {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(userInput)
}).
then(response => response.json())
.then(data => data.filter(element =>
element.PlaceName.toLowerCase().indexOf(userInput.toLowerCase()) > -1))
.then(filteredOptions => this.setState(
{
activeOption: 0,
filteredOptions: filteredOptions,
showOptions: true,
userInput: e.currentTarget.value
}));
};
.
.
.
.
render() {
const {
onChange,
onClick,
onKeyDown,
state: { activeOption, filteredOptions, showOptions, userInput }
} = this;
let optionList;
if (showOptions && userInput) {
console.log(filteredOptions)
if (filteredOptions.length) {
optionList = (
<ul className="options">
{filteredOptions.map((optionName, index) => {
let className;
if (index === activeOption) {
className = 'option-active';
}
return (
<li className={className} key={optionName} onClick={onClick}>
{optionName}
</li>
);
})}
</ul>
);
} else {
optionList = (
<div className="no-options">
<em>No Option!</em>
</div>
);
}
}
return (
<React.Fragment>
<div className="search">
<input
type="text"
className="search-box"
onChange={onChange}
onKeyDown={onKeyDown}
value={userInput}
/>
<input type="submit" value="" className="search-btn" />
</div>
{optionList}
</React.Fragment>
);
}
}
ReactDOM.render(<App />, document.querySelector("#app"));
Once I try and run this, I get two errors: one for a synthetic event being reused for performance issues and one for a component changing an controlled input

Answer 1

You could put a setTimeout in the onChange method. And if the user doesn't type, you make the request, in other wise, you can't make the request

Answer 2

It looks like you were anticipating the filteredOptions variable to be a list of strings. It is actually a list of objects, which was causing React to throw the "object not allowed as children" error. Also, you can't use the event object to set state as it is already released. However, you were already storing the value in a variable which you could use, userInput. I updated your code with some very minor tweaks, and it appears to work. Take a look at a working example:
import React from "react";
import "./styles.css";
class App extends React.Component {
render() {
return (
<div className="App">
<Autocomplete />
</div>
);
}
}
class Autocomplete extends React.Component {
state = {
activeOption: 0,
filteredOptions: [],
showOptions: false,
userInput: ""
};
onChange = (e) => {
const userInput = e.currentTarget.value;
// Mock out the API call and JSON
Promise.resolve()
.then(() => {
const data = [
{ PlaceName: "Place 1" },
{ PlaceName: "Place 2" },
{ PlaceName: "Another Place 1" },
{ PlaceName: "Another Place 2" }
];
return data.filter(
(element) =>
element.PlaceName.toLowerCase().indexOf(userInput.toLowerCase()) >
-1
);
})
.then((filteredOptions) =>
this.setState({
activeOption: 0,
filteredOptions: filteredOptions,
showOptions: true,
userInput: userInput
})
);
};
render() {
const {
onChange,
onClick,
onKeyDown,
state: { activeOption, filteredOptions, showOptions, userInput }
} = this;
let optionList;
if (showOptions && userInput) {
if (filteredOptions.length) {
optionList = (
<ul className="options">
{filteredOptions.map((option, index) => {
let className;
if (index === activeOption) {
className = "option-active";
}
return (
<li
className={className}
key={option.PlaceName}
onClick={onClick}
>
{option.PlaceName}
</li>
);
})}
</ul>
);
} else {
optionList = (
<div className="no-options">
<em>No Option!</em>
</div>
);
}
}
return (
<React.Fragment>
<div className="search">
<input
type="text"
className="search-box"
onChange={onChange}
onKeyDown={onKeyDown}
value={userInput}
/>
<input type="submit" value="" className="search-btn" />
</div>
{optionList}
</React.Fragment>
);
}
}
export default App;