title: Ternary operator in react native
body: <pre><code> &lt;Container&gt;
      &lt;Header function1={()=&gt;this.props.navigation.openDrawer()}/&gt;
          &lt;Content&gt;
                  {this.state.formInputs.formFeilds.map((data)=&gt;(
                                                  {this.state[`${data}`]?&lt;Item floatingLabel success&gt;:&lt;Item floatingLabel&gt;}
                                                  &lt;Label&gt;data&lt;/Label&gt;
                                                  &lt;Input value={data}/&gt;
                                                  &lt;Icon name='checkmark-circle' /&gt;
                                              &lt;/Item&gt;             
                                          ))}
  
                &lt;/Content&gt;
        &lt;/Container&gt;
                  )
  </code></pre>
  
  <p>I have  this simple return statement in render function of my react native class<br/>
  <br/>I want to use <strong><code>&lt;Item floatingLabel success&gt;</code></strong> when this <code>this.state[</code>${data}<code>]</code> is true else <strong><code>&lt;Item floatingLabel &gt;</code></strong> when it is false. <br/><br/>
  So i use ternary operator (?:) But the code is throwing error </p>
  
  <blockquote>
    <p>that this is reserved key word</p>
  </blockquote>
  
  <p>So I converted <code>{this.state[</code>${data}<code>]?&lt;Item floatingLabel success&gt;:&lt;Item floatingLabel&gt;}</code> to <code>this.state[</code>${data}<code>]?&lt;Item floatingLabel success&gt;:&lt;Item floatingLabel&gt;</code> <br/><br/>
  Now the error is </p>
  
  <blockquote>
  <pre><code>&gt;     Unexpected token, expected ,
   (128:5)   126 |                           ))}   
  127 |
  128 |      &lt;/Content&gt;
  129 |      ^ &lt;/Container&gt;
  </code></pre>
  </blockquote>
  
  <p>But if I render like </p>
  
  <pre><code>     &lt;Container&gt;
                      &lt;Header function1={()=&gt;this.props.navigation.openDrawer()}/&gt;
  &lt;Content&gt;
          {this.state.formInputs.formFeilds.map((data)=&gt;(
                                          &lt;Item floatingLabel success&gt;
                                          &lt;Label&gt;data&lt;/Label&gt;
                                          &lt;Input value={data}/&gt;
                                          &lt;Icon name='checkmark-circle' /&gt;
                                      &lt;/Item&gt;             
                                  ))}
  
        &lt;/Content&gt;
  </code></pre>
  
  <p></p>
  
  <p>then code run successfully. But I need to use ternary operator.
  Any help please.</p>