React native conditional rendering an array with 2 conditions

Question

I have an array with several objects. Inside each object i have a field called type that can be either a or b. I am trying to conditional render a specific view for type a and a specific view for type b.

Here is my array:

DATA=[
{id:1, type:'a'},{id:2,type:'b'}
]

return(
{DATA.type === 'a' ?

<Text>I am type A</Text>
:
<Text>I am Type B </Text>
}
)

When i do that nothing appears on the screen.

UPDATE

DATA=[
{id:1, type:'a',locked:true},
{id:2,type:'b',locked:false}
]

const[isLocked,setIsLocked]=useState(false)

return(

{isLocked && DATA.map((item) => item.type === 'a')) ?

<Text>I am type A</Text>
:
null}
)

it is still not working. I am type A still appears on all pages of my carousel.

DATA is an array. You will need to use index like DATA[0].type === 'a' ? ... — Karan
– Karan, Commented Mar 15, 2022 at 11:35
@Karan i dont want to specify the object because i am using a carousel — kd12345
– kd12345, Commented Mar 15, 2022 at 12:16

Jimi Pajala · Accepted Answer · 2022-03-15 11:43:12Z

1

You need to map your array to accomplish it. Otherwise, you can't get the correct key.

DATA = [
  { id:1, type:a },
  { id:2, type:b },
]

return(
  DATA.map((item) => item.type === 'a' 
    ? <Text>I am type A</Text>
    : <Text>I am Type B </Text>
))

edited Mar 15, 2022 at 11:43

Jimi Pajala

2,37813 silver badges21 bronze badges

answered Mar 15, 2022 at 11:37

Levi D.

3061 silver badge10 bronze badges

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

3 Comments

kd12345 Over a year ago

It is still not working.

Levi D. Over a year ago

Be sure that your syntax for array creation (for RN) is: const DATA = [ { id:1, type:"a" }, { id:2, type:"b" }, ]

kd12345 Over a year ago

this is an typo mistake in my question. Still not workinh

Collectives™ on Stack Overflow

React native conditional rendering an array with 2 conditions

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related