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

My if statement is not working in React Native

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?

Tags:

2

Answers


  1. 0

    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

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

    Login or Signup to reply.
  2. 0

    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 ... }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search