I'm calling a movie API, and want the searchValue to be updated everytime I write in the search bar. However, it seems like I need to define the "setSearchValue" as I'm using typescript. How can I do it?
import React from 'react';import { useState, useEffect } from 'react';import { ScrollView } from 'react-native';import MovieList from './components/MovieList'import Search from './components/Search';const App: React.FC = () => { const [movies, setMovies] = useState([]); const [searchValue, setSearchValue] = useState(''); const getMovieRequest = async () => { const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=520a7faf`; const response = await fetch(url); const responseJson = await response.json(); if(responseJson.Search) { setMovies(responseJson.Search); } }; useEffect(() => { getMovieRequest(searchValue); }, [searchValue]); console.log(movies); return (<><Search searchValue={searchValue} setSearchValue={setSearchValue} /><ScrollView><MovieList movies={movies} /></ScrollView></> );};export default App;
And here is the Search component:
import React from 'react';import { View, TextInput } from 'react-native';interface Props { value: string; searchValue: string;}const Search: React.FC<Props> = (props) => { return (<View><TextInput placeholder="Search here" value={props.value} onChange={(event) => props.setSearchValue(event.target.value)} /></View> );}export default Search;
I'm getting the error: "Property 'setSearchValue' does not exist on type 'PropsWithChildren'."