nahumzs

{
  // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  // Placeholders with the same ids are connected.
  // Example:
  "Print to fox": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",

nahumzs

import React from "react";

// 1.- instantiate the context
// note: you could do import React, { createContext} from "react"
// and use only createContext(); and will work as well
export const TacoContext = React.createContext();

// this can be a service in another file, returning promises, etc ...
const proteins = ["🐄", "🐙", "🐓", "🥦", "🐷"];
const vegetables = ["🥑", "🍅", "🥕", "🥒"];

nahumzs

import React from "react";
import HoverState from "./HoverState";

export default class RenderProps extends React.Component {
  render() {
    return (
      <HoverState>
        {isHover => {
          if (isHover) {
            return <button>🦁</button>;

nahumzs

import React from "react";

export default class HoverState extends React.Component {
  state = { isHover: false };

  handleHover = isHover => () => {
    this.setState({ isHover });
  };

  render() {

nahumzs

export default class Form extends Component {
  // Defining Context Types these are the properties that 
  // the consumer component can use.
  static childContextTypes = {
    onSent: func,
    isDisabled: bool,
  }

  // Providing the actual values for the Context Types 
  // defined in childContextTypes

nahumzs

{ /* This structure will work */ }
<Tabs>
  <Tab></Tab> { /* ← 😻this child will be correctly extended */ }
<Tabs>

{ /* Slight change in the structure will break the implementation: */ }
<Tabs>
  <div> { /* ← 😵this will be the extend child */ }
    <Tab></Tab> { /* ← 😩this will not receive the parent state */ }
  </div>

nahumzs

export default class Form extends Component {
  canIDoSomething = () => {
    return Promise.resolve(true)
  }

  render() {

    const extendedProps = {
      isFormDisabled: this.props.isDisabled,
      canIDoSomething: this.canIDoSomething,

nahumzs

export default class Collapsible extends Component {
  state = {
    // this state will be use by the uncontrolled component
    startCollapsed: this.props.startCollapsed || true,
  }

  // How to detect if it's controlled or not
  isControlled() {
    return typeof this.props.isCollapsed !== "undefined";
  }

nahumzs

const Footer = (props) => {
 const {children} = props;
 return (<div className=”footer”>{children}</div>)
}

nahumzs

// Children Extend Pattern

// when to use it:
// `Children Extend` is a pattern which focuses on passing down the state of the parent component to its children
// Solving the problem that arise when a children component want to comunicate with their parent.

// pros:
// Simple to pass down state or a `callback` with basic javascript knowledge
// Easy to understand, is just about extending a javacript object.