Breaking News: Grepper is joining You.com. Read the official announcement!

How to call the API when the search value changes

vikash raj answered on May 30, 2022 Popularity 1/10 Helpfulness 1/10

answer How to call the API when the search value changes

How to call the API when the search value changes

Comment

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import MovieList from './components/MovieList';
import MovieListHeading from './components/MovieListHeading';
import SearchBox from './components/SearchBox';

const App = () => {
	const [movies, setMovies] = useState([]);
	const [searchValue, setSearchValue] = useState('');

	const getMovieRequest = async (searchValue) => {
		const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=263d22d8`;

		const response = await fetch(url);
		const responseJson = await response.json();

		if (responseJson.Search) {
			setMovies(responseJson.Search);
		}
	};

	useEffect(() => {
		getMovieRequest(searchValue);
	}, [searchValue]);

	return (
		<div className='container-fluid movie-app'>
			<div className='row d-flex align-items-center mt-4 mb-4'>
				<MovieListHeading heading='Movies' />
				<SearchBox searchValue={searchValue} setSearchValue={setSearchValue} />
			</div>
			<div className='row'>
				<MovieList movies={movies} />
			</div>
		</div>
	);
};

export default App;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: www.freecodecamp.org

Tags: api call javascript search when

Link to this answer
Share Copy Link

Contributed on May 30 2022

vikash raj

0 Answers Avg Quality 2/10

How to call the API when the search value changes

Contents

More Related Answers

How to call the API when the search value changes

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.