Getting API with useEffect, inside a handle change function

Question

I'm using the YTS API and I need to change the link for the call, I have to use ?query_term= and add the text that the user is typing, for autocomplete. I'm using mantine components for the autocomplete. I tried putting the call inside the handlechange function, but this is not possible.

const [movieNames, setMovieNames] = useState([])

const onChangeHandler = (text) => {
    useEffect(() => {
        const loadMovieNames = async () => {
            const response = await axios.get('https://yts.mx/api/v2/list_movies.json?query_term='+text);
            let arrayOfMoviesNames = [];

            response.data.data.movies.forEach(i => {
                arrayOfMoviesNames.push(i.title)
            });
            setMovieNames(arrayOfMoviesNames)
        }
        loadMovieNames()
    }, [])
}

.

<Autocomplete
         placeholder="Search Movie"
         limit={8}
         data={movieNames}
         onChange={e => onChangeHandler(e.target.value)}
/>

AmerllicA · Accepted Answer · 2022-03-02T06:28:00.717

You MUST use hooks in the execution context of Function Component, you used the useEffect inside a function not in the execution context of Function Component.

const YourComponent = () => {
  const [movieNames, setMovieNames] = useState([]);
  
  const loadMovieNames = async (text) => {
    const response = await axios.get(
      'https://yts.mx/api/v2/list_movies.json?query_term=' + text
    );
    let arrayOfMoviesNames = [];
  
    response.data.data.movies.forEach((i) => {
      arrayOfMoviesNames.push(i.title);
    });
    setMovieNames(arrayOfMoviesNames);
  };


  return (
    <Autocomplete
      placeholder="Search Movie"
      limit={8}
      data={movieNames}
      onChange={(value) => loadMovieNames(value)}
    />
  );
};

Riyasat - TheCodeHeist · Answer 2 · 2022-02-27T19:07:41.317

It is also possible without useEffect, so without making it so complicated by using useEffect and onChangeHandler both, only use onChangeHandler function to update the movieNames and it will automatically update the DOM texts (I mean where ever you use)...

import React, { useState } from "react";

function MoviesPage(props) {
  const [ movieNames, setMovieNames ] = useState([]);
  const [ searchValue, setSearchValue ] = useState("");

  const onChangeHandler = async (text) => {
    const response = await axios.get(
      'https://yts.mx/api/v2/list_movies.json?query_term=' + text
    );

    let arrayOfMoviesNames = [];

    response.data.data.movies.forEach(i => {
      arrayOfMoviesNames.push(i.title)
    });
    
    setMovieNames(arrayOfMoviesNames);
  }

  return (
    <div>
      <Autocomplete
        placeholder="Search Movie"
        limit={8}
        data={movieNames}
        onChange={(e) => onChangeHandler(e.target.value)}
      />
    </div>
  );
}

export default MoviesPage;

...and just to clarify, you can use useEffect in case of API if you want to initialize the page with the API data. You can use this hook if you don't have any onChange handlers. Another way you can approach is you can update a state hook (like searchData) on the change of the Search Bar, and lastly add the the searchData variable to the useEffect dependency array:

useEffect(() => {
  // use the searchData variable to populate or update the page
  // ...
},
[
  searchData, // <-- talking about this line
]);

So, this was my solution. Hope this helps you mate!

thanks! This seems like a good solution, however, i can't write in the input field, I get "Cannot read properties of undefined (reading 'value')" — Tom Hugin, Feb 27 '22 at 19:59
In `e.target.value`? If that's where the problem is, try using `useRef` and tackle this problem in another way... — Riyasat - TheCodeHeist, Feb 28 '22 at 02:58

score 0 · Answer 3 · answered Feb 27 '22 at 18:34

useEffect is a hook, which executes on state change, So keep the useEffect funtion outside the onChangeHandler and add a new state for 'query param' and setQueryState(text) inside the onChangeHandler, and put the state param as dependency in useEffect, So whenever this state gets changed this will call the use effect function automatically.

Getting API with useEffect, inside a handle change function

3 Answers3