title: Using if statements in JSX
body: <p>I am making a mobile app, I have a list of dictionaries like</p>
  <pre class="lang-js prettyprint-override"><code>    var userMessagesSent = [
          {sentBy: &quot;user&quot;, content: &quot;Hello universe&quot;},
          {sentBy: &quot;user&quot;, content: &quot;Spain is big&quot;},
          {sentBy: &quot;araf&quot;, content: &quot;Nobody said spain is small&quot;},
          {sentBy: &quot;user&quot;, content: &quot;Yeah you are right&quot;}    
      ];
  </code></pre>
  <p>And I also have a ScrollView, like</p>
  <pre class="lang-js prettyprint-override"><code>&lt;ScrollView style={styles.scrollArea}&gt;
                  {
                      userMessagesSent.map((item, index) =&gt;
                          &lt;Text&gt;&lt;/Text&gt;
                      )
                  }
                  &lt;/ScrollView&gt;
  </code></pre>
  <p>Now isnide that mapping, I want to check if the item.sentBy is &quot;user&quot; or &quot;araf&quot;. If it's &quot;araf&quot; then it will have a SafeAreaView with some styles, otherwise it will have another SafeAreaView with completely different styles. How can I make something like that?</p>