I'm using react native with typescript to render some movie posters from an API when the movie title is writen on the search bar. But when I try to render the search bar on my app I get this error:
Property 'value' is missing in type '{ searchValue: string; setSearchValue: Dispatch<SetStateAction>; }' but required in type 'Props'.
And under it:
Search.tsx(7, 5): 'value' is declared here.
Here is the App code:
import React from 'react';import { useState, useEffect } from 'react';import { ScrollView } from 'react-native';import MovieList from './components/MovieList'import Search from './components/Search';import { Container } from './styles'const App: React.FC = () => { const [movies, setMovies] = useState([]); const [searchValue, setSearchValue] = useState(''); const getMovieRequest = async (searchValue) => { 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 (<><Container><Search searchValue={searchValue} setSearchValue={setSearchValue} /><ScrollView><MovieList movies={movies} /></ScrollView></Container></> );};export default App;
And the search bar component:
import React from 'react';import { View, TextInput } from 'react-native';interface Props { searchValue: string; setSearchValue:(string) => void; value: any;}const Search: React.FC<Props> = (props) => { return (<View><TextInput placeholder="Pesquise aqui" value={props.value} onChange={(event: any) => props.setSearchValue(event.target.value)} /></View> );}export default Search;