Objects are not valid as a React child while passing array as data to render

user_9343113 0
Viewed 93

I am using a dependency called react-native-autocomplete-input. Here i am trying to use a collection of data which is an array. But it throws the error everytime i trying to use the array Objects are not valid as a React child. If you meant to render a collection of children, use an array instead. Here's what my code looks like :

return (
  <Autocomplete
      data={queryResult}
      placeholder={"Type name ..."}
      autoFocus={true}
      placeholderTextColor={'#fff'}
      keyExtractor={(item, i) => item.id.toString()}
      onChangeText={(text) => searchData(text)}
      renderItem={({ item, i }) => (
          <TouchableWithoutFeedback
              onPress={() => {
                  props.navigation.navigate("MovieDetail", {
                      item: item,
                  });
              }}
          >
              <View
                  style={{
                      flex: 1,
                      flexDirection: "row",
                      marginBottom: 10,
                      borderColor: 'red',
                      borderWidth: 1
                  }}
              >
                  <Image
                      style={{ width: 38, height: 57 }}
                      source={{ uri: 'https://picsum.photos/200' }}
                  />
                  <View
                      style={{
                          flexWrap: "wrap",
                          flexDirection: "column",
                          marginLeft: 5,
                          justifyContent: "center",
                      }}
                  >
                      <Text>New movie</Text>
                      <Text>2021</Text>
                  </View>
              </View>
          </TouchableWithoutFeedback>
      )}
  />
)

This is from my render function. I am passing queryResult as data which is throwing the error. Here's how my queryResult array looks like:

var queryResult = [
  {
    backdrop_path: "http://image.tmdb.org/t/p/w500//axMEROxH94BveBZBfPctWX4qLe4.jpg",
    genre_ids: [16, 878, 10751, 35],
    genres: undefined,
    id: 482321,
    image: "http://image.tmdb.org/t/p/w342//gA9QxSravC2EVEkEKgyEmDrfL0e.jpg",
    popularity: 1119.149,
    stat: "2021-10-15",
    title: "Ron's Gone Wrong",
    vote_average: 8.3,
    vote_count: 484
  },
  {
    backdrop_path: "http://image.tmdb.org/t/p/w500//axMEROxH94BveBZBfPctWX4qLe4.jpg",
    genre_ids: [16, 878, 10751, 35],
    genres: undefined,
    id: 482321,
    image: "http://image.tmdb.org/t/p/w342//gA9QxSravC2EVEkEKgyEmDrfL0e.jpg",
    popularity: 1119.149,
    stat: "2021-10-15",
    title: "Ron's Gone Wrong",
    vote_average: 8.3,
    vote_count: 484
  }
]

What can be the reason behind this. How exactly should i pass this array?

react-native reactjs javascript
1 Answers

In react-native-autocomplete-input, it required an array of strings and you are padding an array of objects.

  1. If you want to use the default flat list render item then you must need to pass data as an array of strings.e.g. data = ["input 1", "input data 2]

  2. If you want to use an object then use 'flatListProps'

e.g.

<Autocomplete
  data={queryResult}
  flatListProps={{
    keyExtractor: (_, idx) => idx,
    renderItem: ({ item }) => <Text>{item.title}</Text>,
  }} />
user_84289490
Related