My if statement is not working in React Native

Question

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?

Answer 1

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 ... }