How use ifs with React variables

[gcuculi]

Hi! How to use if for some state variable from React?

aside.sidebar
    .sidebar-header
        {@if=this.state.show === true}
            .avatar-profile.mt-4
                img.avatar-image(src="{avatarProfile}", alt="")
                .avatar-country {this.state.country}
            .sidebar-name {this.state.firstName}
            NavLink.btn.btn-outline-warning.btn-sm(to="configuracoes.html")
                 FormattedMessage(__jsx='{...messages.edit}')
         {/if}

Sorry, I did't find the documentation. Tks

[bluewings]

@gcuculi

You can use one of the following.

• using @if attribute The @if attribute can only be used by one component, so I used React.Fragment in the example below. You can wrap it with other elements such as div.

  aside.sidebar
  .sidebar-header
  Fragment(@if='this.state.show === true')
    .avatar-profile.mt-4
      img.avatar-image(src="{avatarProfile}", alt="")
      .avatar-country {this.state.country}
    .sidebar-name {this.state.firstName}
    NavLink.btn.btn-outline-warning.btn-sm(to="configuracoes.html")
      FormattedMessage(__jsx='{...messages.edit}')

• using javascript syntax

  aside.sidebar
  .sidebar-header
  | {this.state.show === true && (
  .avatar-profile.mt-4
    img.avatar-image(src="{avatarProfile}", alt="")
    .avatar-country {this.state.country}
  .sidebar-name {this.state.firstName}
  NavLink.btn.btn-outline-warning.btn-sm(to="configuracoes.html")
    FormattedMessage(__jsx='{...messages.edit}')
  | )}

[gcuculi]

Ok. I tried both solutions and using fragment this error was displayed:

invariant.js:42 - Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of "Sidebar".

Using javascript and wraping into a div element works fine!

Thank you

[bluewings]

@gcuculi To use Fragment, you must pass it as follows.

import React, { Fragment } from 'react';
import template from './template.pug';

class Sample extends React.Component {

  render() {
    const {
      avatarProfile,
      messages,
    } = this.props;

    return template.call(this, {
      // variables
      avatarProfile,
      messages,
      // components
      FormattedMessage,
      Fragment,
      NavLink,
    });
  }
}

[gcuculi]

Uhmmm, same error. :( When I 'console.log(Fragment)' in JS file, it is 'undefined'

Is needed to install some package? I'm new in React programming. Would you have any tutorial to indicate about React?

Tks, so much!

[bluewings]

Fragment is available in React version 16 or later, check out the version you are currently using.

https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

[gcuculi]

Mine is 15.6.1. Thank you