README.md

Lesson 3

Conditional Rendering

Used when you want to render different content based on a condition.

const sampleComponent = ({ isTrue }) => {
  return isTrue && <p>True!</p>
};

Event Handlers

class Switcher extends React.Component {

  constructor(props) {
    super(props);
    this.state = { name: 'Name in state' };
  }

  render() {
    return (
      <button onClick={ this._handleButtonClick }>
        click me
      </button>
    );
  }
  _handleButtonClick() {
    console.log('Button is clicked in ${ this.state.name }');
    // will throw an error because the code doesn't keep scope
  }
}

3 ways of binding handlers:

Inline:

<button onClick={ this._handleButtonClick.bind(this) }>
  click me
</button>

Constructor:

constructor(props) {
    super(props);
    this.state = { name: 'React in patterns' };
    this._buttonClick = this._handleButtonClick.bind(this);
  }

Fat Arrow:

_handleButtonClick = () => {
    console.log(`Button is clicked inside ${ this.state.name }`);
  }