If error - ReactJS

Question

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>

kurumkan · Accepted Answer · 2017-05-05 22:25:42Z

1

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>}

edited May 5, 2017 at 22:25

answered May 5, 2017 at 22:01

kurumkan

2,7354 gold badges35 silver badges56 bronze badges

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

6 Comments

kurumkan Over a year ago

please add more code to your question - where do you use it? what is outside of { } ?

JuMoGar Over a year ago

Ok, already done. It is a Navbar, where I want that in function of one user is Logged shown X buttons or not.

kurumkan Over a year ago

oh my crystall ball can't help

kurumkan Over a year ago

so answer your own question - it may be helpful for someone

JuMoGar Over a year ago

Do not worry about. It is 'solved'. Maybe not in the cleanest way, but the problem is solved. Thank you.

|

awzx · Accepted Answer · 2017-05-05 21:02:41Z

0

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'

answered May 5, 2017 at 21:02

awzx

1,0533 gold badges13 silver badges32 bronze badges

2 Comments

Trevor Freeman Over a year ago

I believe that you can also add a , to the end of each closing tag instead of wrapping in a div, so long as this is ultimately being included in a render that is wrapping everything in one parent tag.

JuMoGar Over a year ago

Thank you. But it is not working. They loses their styles Wrapping them into a DIV. And with ',' I get error.

JuMoGar · Accepted Answer · 2017-05-07 21:38:07Z

0

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> : ''}

edited May 7, 2017 at 21:38

answered May 5, 2017 at 21:30

JuMoGar

1,7603 gold badges23 silver badges52 bronze badges

2 Comments

awzx Over a year ago

Which version of react are you using? class is not a standard prop for this library? Instead of wrapping the things into a div would be to create a specific component for each state instead of having code like this?

JuMoGar Over a year ago

I'm using React ^ 15.4.2. With a plugin that allows me to use Class instead of ClassName. Yes, it would be an option, but it is not necessary in this case.

Collectives™ on Stack Overflow

If error - ReactJS

3 Answers 3

6 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related