Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Define State type on react native?

$
0
0

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'."


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>