How to find if element exists in an array in react-native

Question

I am trying to render an element after checking whether there is a string e.g. "abc" present in an array. I have tried using various different functions like array.find(), array.includes(), array.some() While I do so, it gives me an error -

TypeError: null is not an object(evaluating 'o.includes')

Below is the piece of code that I am using inside render function. "abc" is the array where I am trying to check whether string "a" exists in that array, if it does then display that ExpandedHeader element.

PS: I am new to react-native.

<View>
{abc.includes("a") && <ExpandedHeader title={"Got it"} 
       expanded={this.state.riskRatingExpanded}
       onPress={() => {this.setState({
                    riskRatingExpanded :!this.state.riskRatingExpanded,
                    basicDetailsExpanded : false,
                    envProfileExpanded : false,
                    nwswProfileExpanded : false,
                    additionalInfoExpanded : false,
                    scoresExpanded : false,
                  });
             }}

         />}
</View>

But instead, if I do the below it works -

<View>
    {abc != null && <ExpandedHeader title={abc[0]} 
           expanded={this.state.riskRatingExpanded}
           onPress={() => {this.setState({
                        riskRatingExpanded :!this.state.riskRatingExpanded,
                        basicDetailsExpanded : false,
                        envProfileExpanded : false,
                        nwswProfileExpanded : false,
                        additionalInfoExpanded : false,
                        scoresExpanded : false,
                      });
                 }}

             />}
    </View>

This error means that abc is not actually an array (it is actually null), you should be able to confirm that with console.log('abc:', abc);. Where are you getting that from? Sure you are using the correct selector? Or maybe it needs to be initialized first? Then you'd need to do a if (abc == null) { return <View /> } to wait for initialization of the variable first — Michiel Dral
– Michiel Dral, Commented Jan 8, 2019 at 17:26
To check whether abc is null or not I had done a check, where instead of abc.includes("a"), I had written abc != null (to check if abc is not null then display the Expanded header component) and it does display it. Also, in Expanded header if I write abc[0] instead of string "Got it" it displays string "a". — Neha
– Neha, Commented Jan 8, 2019 at 17:29
I might be that it is initializing, so it will show "a" as soon as you look, but the very first time it will be null. Did you try putting if (abc == null) { return <View /> } in your code to make sure it works? You can also put your whole code inside a if (abc != null) { ... } to make sure. — Michiel Dral
– Michiel Dral, Commented Jan 8, 2019 at 17:40

Sarmad Shah · Accepted Answer · 2019-01-08 17:44:51Z

1

Your render function runs before your array data is present and initially your array data is null,

make sure you initialise your abc state as array first,

state = { abc: [] }

with this, your first code should work.

answered Jan 8, 2019 at 17:44

Sarmad Shah

3,8053 gold badges25 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to find if element exists in an array in react-native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related