When your state is null (this.state == null)
Check to see if you are missing a bind =;

Invoking a method vs passing

Know the difference between when you want to invoke a method


vs pass is as a function

handleYesResponse={() => this.handleConfirmedSaved(this.state.editLineIndex)}

Creating new application /w Create React App

> npm install -g create-react-app
> create-react-app my-app
> cd my-app
> npm start
> npm run build (packages for production)
> npm test


Column highlighting – Left click + Option (then select)

Text highlighting
Command + Shift + P
Install (for PackageControll:InstallPackage)
Then type the name of the package

Split screen
Option + Command + 2 (drag files)


This is away to check that a object is not null before asking for it’s property.

const goLiveGasDay = gasDay && moment(gasDay);

When converting between class and method
* props -> this.props
* translate -> this.context.translate

Difference between a method on it’s own and a method in a function

const tableHeaders = ( // JSX);
const foo = () => {};

// This is a lambda expression (a function)
const addButton = () => {
        return props.isViewOnlyUser ? (<div/>) :

// When you call it, you need the parentheses
{ addButton() }

// This is the same declaration, only as a const variable
const addButton =
        props.isViewOnlyUser ? (<div/>) :

// No need for the parentheses here - it's not a function and has already been evaluated
{ addButton }

const quantityTypeSorter = () => (props.isAdding ? undefined : props.handleFoo('xxx'));

const getDefaultSortOrder = () => {
  return {
    properties: ['Id'],
    directions: ['asc'],
getDefaultSortOrder() {
  return {
    properties: ['Id'],
    directions: ['asc'],

// Here is a const as an expression () and another as a block of code {}
const dataRows =, rs => (
     <tr id={rs.Id} key={rs.Id}>

// Note how the block of code needs a return and () 
const dataRows =, rs => {       
    return (
     <tr id={rs.Id} key={rs.Id}>

Converting between code and class in CSS

If you have CSS defined in code

const popoverStyle = {
  maxWidth: '800px',

<Popover style={popoverStyle} >

You can convert to CSS and still override like this

.popoverStyle {
    max-width: 800px;
<Popover className="popoverStyle" style={{ width: '500px' }}>

MaxWidth is what React needs for naming. Remember to convert to proper CSS for style sheet.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: