title: If condition inside of map() React JS
body: <p>I'm learning reactjs and I want to change the color of a badge component depending on the value of a record that I call from the database through an API. However, when I try to do this it shows me nothing when I run it, do you know what I am missing or how I can do it?</p>
  <pre><code>&lt;tbody&gt;
    {this.state.SociosData.map((e, key) =&gt; {
      return (
        &lt;tr className=&quot;trTable&quot;&gt;
          &lt;td&gt;
            &lt;b&gt;{e.nombre_tienda}&lt;/b&gt;{&quot; &quot;}
            &lt;p className=&quot;mt-3  &quot;&gt;
              {e.id_tienda} | {e.tipo_tienda} | Area {e.area_tienda}
            &lt;/p&gt;
            &lt;p&gt;{e.direccion_tienda}&lt;/p&gt;
          &lt;/td&gt;
          &lt;td&gt;
            {() =&gt; {
              if (e.estatusfirma_tienda === &quot;Aprobado&quot;) {
                return &lt;Badge bg=&quot;success&quot;&gt;Firmado&lt;/Badge&gt;;
              } else if (e.estatusfirma_tienda === &quot;Rechazado&quot;) {
                return &lt;Badge bg=&quot;danger&quot;&gt;Firmado&lt;/Badge&gt;;
              } else {
                return &lt;Badge bg=&quot;warning&quot;&gt;Firmado&lt;/Badge&gt;;
              }
            }}
            {() =&gt; {
              if (e.estadolinea_tienda === &quot;Activo&quot;) {
                return &lt;Badge bg=&quot;success&quot;&gt;Activo&lt;/Badge&gt;;
              } else {
                return (
                  &lt;Badge bg=&quot;light&quot; text=&quot;dark&quot;&gt;
                    Inactivo
                  &lt;/Badge&gt;
                );
              }
            }}
          &lt;/td&gt;
          &lt;ModalFirma&gt;&lt;/ModalFirma&gt;
        &lt;/tr&gt;
      );
    })}
  &lt;/tbody&gt;
  </code></pre>