I want to build a search bar that filters a flatlist in react native. I'm doing so with a TextInput and a component SearchFilter.

In my homescreen I have this TextInput:

        <TextInput
          value={input}
          onChangeText={(text) => setInput(text)}
          style={{ fontSize: 16, marginLeft: 10 }}
          placeholder="Search"
        />

And this component:

      <SearchFilter data={Cars} input={input} setInput={setInput} />

In the component file I have my flatlist:

const searchFilter = (data, input, setInput) => {
    console.log(input)
  return (
    <View>
      <Text>SearchFilter</Text>
      <FlatList
        style={styles.list}
        data={data}
        renderItem={({ item }) => {
          if (input === "") {
            return (
              <View>
                <Text>test</Text>
              </View>
            )
          }
        }}
      ></FlatList>
    </View>
  );
};

When nothing is being searched I want test to be displayed.

The problem is that it shows nothing.

When I do a console.log(input) in my homescreen the console returns an emty string but when I do a console.log(input) in my component file it returns {}. I do not know why. When I tried

if (input === " {}") {
            return (
              <View>
                <Text>test</Text>
              </View>
            )
          }

it also did not work.

Any asolutions?

CodePudding user response：

I suppose the searchFilter is your component ?

If it is the case then you don't use the props correctly, try like this :

const SearchFilter = ({data, input, setInput}) => { ... rest of your code ... }

CodePudding user response：

You can't compare a object like this, it's not the same (in the memory).

Assuming var x = {}

1. x == {} // false (it's the same 'content' but it's not saved at the same place in the memory
2. x == "{}" // false (x is a object "{}" is a string)`

Assuming var y = x

3. y == x // true

To compare basic object, you can use JSON.stringify() function, it's parse object to string like this : (JSON.stringify(x) == JSON.stringify({})) === true It's explain why your condition doesn't work but I don't know why do you have a object as output (I'm not a react developer ^^)

I hope it's even be usefull for you