Question 33589 in React native Question posted in
The official React Native documentation can be found here.

undefinded is not an object – React native

Hello I’m facing with render error in my movie app during printing results for movie searching. Im working in React-Native 0.70.5. Here is some code for this activity
error message
`

import React,{useState,useEffect} from 'react';
import axios from 'axios';
import { View, StyleSheet, Text, TextInput,ScrollView } from "react-native";

const Search = () => {
   const apiurl="https://api.themoviedb.org/3/search/movie?api_key=XXX"
   const [state,setState] = useState({
   s: "Enter a movie",
   results:[]
   });

   const search = () => {
    axios(apiurl + "&query="+ state.s).then(({ data }) => {
        let results = data.search;
        console.log(data);
        setState(prevState => {
            return{...prevState, results: results }
        })
    })
    }
  return (
         <View>
         <TextInput
            onChangeText={text => setState(prevState => {
            return {...prevState, s:text}
            })}
            onSubmitEditing={search}
            value={state.s}
         />
        <ScrollView>
            {state.results.map(result =>(
                <View key={result.id}>
                    <Text>{result.title}</Text>
                </View>
            ))}
        </ScrollView>
        </View>
  );
}

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
});

export default Search;

`

How to change the construction of this function to print movie titles corectly ?

Tags:

3

Answers


  1. 0

    I am not sure but you can try this below ScrollView code…

    <ScrollView>
            {state.results.length>0 && (state.results.map((result) =>(
                <View key={result.id}>
                    <Text>{result.title}</Text>
                </View>
   

)))}
        </ScrollView>
    Login or Signup to reply.
  2. 0

    This is just an example and not the best way to do it.

    You need a success flag, something like this:

    const [success,setSuccess] = useState(false);

const search = () => {
    axios(apiurl + "&query="+ state.s).then(({ data }) => {
        let results = data.results;
        console.log(data);
        setState(prevState => {
            return{...prevState, results: results }
        })
        setSuccess(true);
    })
    }

       <ScrollView>
            {success && state.results.map(result =>(
                <View key={result.id}>
                    <Text>{result.title}</Text>
                </View>
            ))}
        </ScrollView>
    Login or Signup to reply.
  3. 0

    use optional chaining. Might be sometimes you don’t get result.

    <ScrollView>
        {state?.results?.map(result =>(
            <View key={result?.id}>
                <Text>{result?.title}</Text>
            </View>
        ))}
</ScrollView>

    Let me know is it helpful or not

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search