Whitespaces, trailing commas and semi colons

Whitespaces

1. After leading a parenthesis, in functions and conditionals.

 if (a == b) {
   return true;
 }

 handleAction = (event) => {
   return event;
 }

 if (a == b) {
   return true;
 } else {
   return false;
 }

2. In curly braces.

 const data = { admin: 'true' };

 import { Component } from 'react';

3. For long method chains

  const filteredUsers = this.state.usersWithRoles
        .filter(user => user.name.toLowerCase()
          .includes(value.toLowerCase()));

4. After adding a single line comment

  // import third party libraries
  import { Button } from 'react-toolbox';

5. Leave whitespace after blocks (as shown in 1 above)

6. No whitespaces inside brackets[] or parenthesis()

Trailing Commas

1. Writing objects, function parameters, imports, and arrays in block

    import { 
      Autocomplete, 
      Button, 
      Dropdown, 
      Snackbar, 
    } from 'react-toolbox';

    this.state = {
      filteredUsers: [],
      roles: [],
      searchValue: '',
      showModal: false,
      usersWithRoles: [],
    };

   const usersWithRoles = [
     'Admin',
     'Admin2',
     'Admin3',
   ];
   
   const saveRole(
      userId,
      roleId,
      currentRole,
    ) {
       // function code
    }

Trailing semi-colons

1. After variable declaration

   let users = []; 

2. After expressions

• Examples are return statements, function calls, immediately invoked function expressions, etcetera

   users.map(user => {
     return user;
   }

  alert("Hello world");

  // IIFE
  (function(){...A...})();

  public handleToggle = () => {
    this.setState({ showModal : !this.state.showModal });
  }; 

For more visit: AirBnB style guide