Text strings must be rendered within a <Text> component with if condition

Question

*I am a new for react native and JavaScript . This not a advance quection.I just try to compare a string like in java .but it doesn't work .when run this it also print the if conditions like a sting .

 <FlatList 
        data={data}
        keyExtractor={({id },index) => id}
        renderItem={({item}) =>(

          <View style={styles.container}>

            if({item.id} ==1){
              <Text style={styles.textStyle1}>ID is : {item.id}</Text>
            }else{
              <Text >ID is : {item.id}</Text>
            }
               
                <Text style={styles.textStyle2}>Title is :{item.title}</Text>
                <Text style={styles.textStyle3}>releaseYear is :  {item.releaseYear}</Text>
          </View>
          
          
        )}
      
      />   

 
    
    
    * error
    Error: Text strings must be rendered within a <Text> component.
    
    
    * output in web
    
    [![enter image description here][1]][1]
    
    
      [1]: https://i.sstatic.net/UkHS6.png

Hassan Kandil · Accepted Answer · 2022-02-17 09:44:13Z

2

You cannot add code inside JSX elements but you can do the following:

Add the code inside a block and use Conditional (ternary) operator:

  <View style={styles.container}>

    {
    item.id ==1 ?
      <Text style={styles.textStyle1}>ID is : {item.id}</Text>
    :
      <Text >ID is : {item.id}</Text>
    }
       
        <Text style={styles.textStyle2}>Title is :{item.title}</Text>
        <Text style={styles.textStyle3}>releaseYear is :  {item.releaseYear}</Text>
  </View>

Or you may use Immediately Invoked Function Expressions (IIFEs)

   {(function() {
      if (item.id==1) {
        return <Text style={styles.textStyle1}>ID is : {item.id}</Text>;
      } else {
        return <Text >ID is : {item.id}</Text>
      }
    })()}
   
    <Text style={styles.textStyle2}>Title is :{item.title}</Text>
    <Text style={styles.textStyle3}>releaseYear is :  {item.releaseYear}</Text>

edited Feb 17, 2022 at 9:44

answered Feb 17, 2022 at 9:22

Hassan Kandil

1,8861 gold badge15 silver badges29 bronze badges

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

5 Comments

ayeshchanaka Over a year ago

it's work . but i have add {} and try to use if condition it doesn't work

Hassan Kandil Over a year ago

I will add one more method that will help with your case

ayeshchanaka Over a year ago

Immediately Invoked Function Expressions not work for me

Hassan Kandil Over a year ago

Can you explain how it doesnt work ? error or what?

ayeshchanaka Over a year ago

I make another condition with immediate invoked and I check it(item.title =='Inception') but it didn't return true and false. i think it doesn't read

P-A · Accepted Answer · 2022-02-17 09:25:22Z

1

Try this :

{item.id ==1 ? <Text style={styles.textStyle1}>ID is : {item.id}</Text>
     : <Text >ID is : {item.id}</Text>
}

Have a look at Conditional Rendering

answered Feb 17, 2022 at 9:25

P-A

4643 silver badges10 bronze badges

Collectives™ on Stack Overflow

Text strings must be rendered within a <Text> component with if condition

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related