React

Container
Does data fetching.
Component (Traditional)
Does rendering.

#Naming

  • el: for element
  • inputRef for
  • functions are in camel case

    • therefore instance variables should be camel case
const Component = (publicProps, publicContext) => {
  const {children, ...props} = publicProps;
  return (
    <div {...props}>
      {children}
    </div>
  );
}

#Refs

For after 16.3 to use [React.createRef()](https://reactjs.org/docs/refs-and-the-dom.html)

For before 16.3 use [callback refs](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs)

Use instance variable names with postfix Ref. For example for <16.3:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = null;j
  }

  componentDidMount() {
    // autofocus the input on mount
    this.inputRef && this.inputRef.focus();
  }

  render() {
    return (
      <input
        ref={(el) => this.inputRef = el}
      />
    );
  }
}

Ensure that ref exists, see line 9: this.inputRef && this.inputRef.focus();

When using reactstrap use innerRef, for example:

  render() {
    return (
      <Input
        innerRef={(el) => this.inputRef = el}
      />
    );
  }