saaage/blog-autocomplete

blog-autocomplete's Issues

Curious to better understand search.value and this.search

Hello Stefan, I was researching how to do do suggestions for a music search bar and I came across your post on Medium, I am trying to convert the component from a class to functional component, however, I'm stumped by the " this.search.value," as well as "this.search". Would you mind (if you can) explaining how I would change this to utilize it in a class component? This is what I got so far.

`const { API_KEY } = process.env;
const API_URL = 'http://api.musicgraph.com/api/v2/artist/suggest';

const Search = () => {

const [state, setState] = useState({
query: '',
results: [],
});
const getInfo = () => {
axios
.get(${API_URL}?api_key=${API_KEY}&prefix=${state.query}&limit=7)
.then(({ data }) => {
setState((prevState) => ({
...prevState,
results: data.data,
}));
});
};
const handleInputChange = () => {
setState(
(prevState) => ({
...prevstate,
query: this.search.value, //would I need a variable for search in a functional component?
}),
() => {
if (state.query && state.query.length > 1) {
if (state.query.length % 2 === 0) {
getInfo();
}
} else if (!state.query) {
}
}
);
};

return (

<input
placeholder='Search for...'
ref={(input) => (this.search = input)} /* No idea how to input 'search' for a functional component, would I need to create a variable for this? */
onChange={() => handleInputChange()}
/>


);
};
export default Search;`