undefined is not a function .filter function-CodePudding

I'm trying to make a search input setting the state "search" in the onChangeText

 <TextInput
          label="Pesquisar"
          theme={{
            colors: {
              primary: "white",
              text: "white",
              placeholder: "white",
              underlineColor: "transparent",
            },
          }}
          value={search}
          onChangeText={setSearch}
         />

so I'm getting an array of objects from axios and then i set it into another state

const [cars, setCars] = useState([])

In the console.log i did i got these values:

data Array [
  Object {
    "__v": 0,
    "_id": "6316364fdd41d96a9df444",
    "image": "https://i.ibb.co/C51M22C/8bcc6f8cb09bba25780f2506c85c9635.jpg",,
    "model": "240",
    "name": "Car 1",
    "price": 99999999,
  },
  Object {
    "__v": 0,
    "_id": "6316364fdd41d96a9dff54cb",
    "image": "https://i.ibb.co/C51M22C/8bcc6f8cb09bba25780f2506c85c9635.jpg",,
    "model": "200",
    "name": "Car 2",
    "price": 99999999,
   }
]

But when I try to use a filter function and then a .map into this function to show the array of cars, it gives this error: "undefined is not a function (near '...filteredCars.map')"

the filteredCar function:

const filteredCars = () => {
    cars.filter((item) => {
      return item.name.toLowerCase().includes(search.toLowerCase());
    });
  };

here is where i call the filter function inside a .map

const carsItems = filteredCar.map((item) => {
    return (
      <View key={item._id}>
        <View style={{ padding: 10 }}>
          <TouchableOpacity key={item} activeOpacity={0.8}>
            <Card
              style={{
                marginLeft: 15,
                marginRight: 15,
                marginTop: 0,
                borderRadius: 10,
              }}
              onPress={() => {
                navigation.push("Details", {
                  id: item._id,
                  name: item.name,
                });
              }}
            >
              <Card.Cover
                source={{ uri: item.imagem_principal }}
                style={{ margin: 5, borderRadius: 10 }}
              />
              <Card.Content>
                <Title>{item.name}</Title>
                <Paragraph>{item.model}</Paragraph>
              </Card.Content>
            </Card>
          </TouchableOpacity>
        </View>
        <Divider />
      </View>
    );
  });```
Does anyone know why i'm getting this error?

CodePudding user response：

out of the comments i get it now what your issue is. you're using filteredCars as a function and then want to iterate over it with map. remove the function body around the whole thing.

you where asigning a function to your const filteredCars instead of the array from cars.filter result.

this:

const filteredCars = () => {
    return cars.filter(...filterFunction)
}

is assigning a function to your const. as such you had to call it first to get an array of your filtered cars.

const cars_filtered = filteredCars();

and then you could've map over cars_filtered.

use:

const filteredCars = cars.filter((item) => {
    return item.name.toLowerCase().includes(search.toLowerCase());
});

instead.