CODEWITHSUNDEEP
javascriptreactjs
JuMoGar
JuMoGar

Reputation: 1760

If error - ReactJS

I am trying to do this: 

{this.state.logged ? 
     <p class="nav navbar-text hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p> 
     <p class="nav navbar-text visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p>
     <li class="salir"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-off"></span> Salir</a></li>
     : 
     <li class="entrar"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-user"></span> Entrar</a></li>
}

I tryed 

{
    if (this.state.logged) {
        <p class="nav navbar-text hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p> 
        <p class="nav navbar-text visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p>
        <li class="salir"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-off"></span> Salir</a></li>
    } else
        <li class="entrar"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-user"></span> Entrar</a></li>
    }
}

But I get an error. It is not working too. Just allow me one line in the case 'true' and in the case 'false'. How could I add this three lines? Thank you.

EDIT: This is more code where you can see its locate. (In a Bootstrap Navbar) (In this code, it is shown as I resolve it, wrapping one by one).

<div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-left">
                        <MenuNavItem to='/administrador/inicio' index={true} /*menuItemActive="inicio"*/>Inicio</MenuNavItem>
                        <MenuNavItem to='/administrador/nueva_incidencia' /*menuItemActive="nueva_incidencia"*/>Nueva Incidencia</MenuNavItem>
                        <MenuNavItem to='/administrador/incidencias_recibidas' /*menuItemActive="incidencias_recibidas"*/>Incidencias Recibidas</MenuNavItem>
                        <MenuNavItem to='/administrador/informes' /*menuItemActive="informes"*/>Informes</MenuNavItem>
                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li class="divider visible-xs-block"></li>
                        {this.state.logged === true ? <p class="nav navbar-text hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p> : ''} 
                        {this.state.logged === true ? <p class="nav navbar-text visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p> : ''}
                        {this.state.logged === false ? <li class="entrar"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-user"></span> Entrar</a></li> : ''}
                        {this.state.logged === true ? <li class="salir"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-off"></span> Salir</a></li> : ''}
                    </ul>
                </div>

Upvotes: 1

Views: 51

Answers (3)

JuMoGar
JuMoGar

Reputation: 1760

SOLVED: The solution is to wrap them one by one so they do not fail or lose your styles.

{this.state.logged === true ? <p class="nav navbar-text hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p> : ''} 
{this.state.logged === true ? <p class="nav navbar-text visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p> : ''}
{this.state.logged === false ? <li class="entrar"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-user"></span> Entrar</a></li> : ''}
{this.state.logged === true ? <li class="salir"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-off"></span> Salir</a></li> : ''}

OR: 

{this.state.logged ? <p class="nav navbar-text hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p> : ''} 
{this.state.logged ? <p class="nav navbar-text visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p> : ''}
{this.state.logged ? '' : <li class="entrar"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-user"></span> Entrar</a></li>}
{this.state.logged ? <li class="salir"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-off"></span> Salir</a></li> : ''}

Upvotes: 0

kurumkan
kurumkan

Reputation: 2725

I little bit changed your solution:

{this.state.logged && <p class="nav navbar-text hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p>} 
{this.state.logged && <p class="nav navbar-text visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p>}
{!this.state.logged && <li class="entrar"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-user"></span> Entrar</a></li>}
{this.state.logged && <li class="salir"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-off"></span> Salir</a></li>}

Upvotes: 1

awzx
awzx

Reputation: 1033

One way to do if to use a ternary in your code rendering and wrap the two blocks with a div, when you've several lines of xml markdown you've to wrap with a div, else it shouldn't work.

{this.state.logged === true ? 

     <div>
     <p class="nav navbar-text hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p> 
     <p class="nav navbar-text visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p>
     <li class="salir"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-off"></span> Salir</a></li>
     </div>
     : 
     <div>
     <li class="entrar"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-user"></span> Entrar</a></li>
     </div>
}

You can also replace all the 'class' by 'className'

Upvotes: 0

Related Questions