mohandere

{
	"always_show_minimap_viewport": true,
	"bold_folder_labels": true,
	"caret_extra_bottom": 1,
	"caret_extra_top": 1,
	"caret_extra_width": 1,
	"caret_style": "blink",
	"color_scheme": "Packages/Colorsublime - Themes/LAZY.tmTheme",
	"create_window_at_startup": false,
	"fade_fold_buttons": false,

mohandere

// Place your settings in this file to overwrite the default settings
{
  "editor.wordWrap": "on",
  "editor.tabSize": 2,
  "editor.mouseWheelZoom": false,
  "guides.enabled": false,
  "terminal.integrated.fontSize": 17,
  "editor.fontSize": 20,
  "window.zoomLevel": 0,
  "sublimeTextKeymap.promptV3Features": true,

mohandere

import hoistNonReactStatic from 'hoist-non-react-statics';

const withSearch = (WrappedComponent) => {
  class WithSearch extends React.Component {/*...*/}
  hoistNonReactStatic(EithSearch, WrappedComponent);
  return WithSearch;
}

// Define a static method
ProductsList.staticMethod = function() {/*...*/}

mohandere

render() {
  // A new version of ProductsListWithSearch is created on every render
  const ProductsListWithSearch = withSearch(ProductsList);
  // That causes the entire subtree to unmount/remount each time!
  return <ProductsListWithSearch />;
}

mohandere

const withSearch = WrappedComponent => {
  class WithSearch extends React.Component {
    state = {
      searchTerm: ""
    };
    handleSearch = event => {
      this.setState({ searchTerm: event.target.value });
    };

    render() {

mohandere

const ProductsList = (props) => {
  let { data: products } = props;
  return (
    <div>
      <div>
        <div>
          <h2>Products</h2>
        </div>
      </div>
      <div>

mohandere

import products from './products.json'

class ProductsListWithSearch extends React.PureComponent {
  state = {
    searchTerm: ''
  }
  handleSearch = event => {
    this.setState({ searchTerm: event.target.value })
  }
  render() {

mohandere

const ProductCard = props => {
  return (
    <div className="product">
      <p>
        <b>Title:</b> {props.title}
      </p>
      <p>
        <b>Style:</b> {props.style}
      </p>
      <p>

mohandere

const propsProxyHOC = (WraapperComponent) => {
  return class extends React.Component {
    state = {
      count: 0
    }
    render() {
      // Pass thru the props that the HOC receives
      return <WraapperComponent {...this.props} {...this.state} />
    }
  }

mohandere

const ProductCard = props => {
  return (
    <div>
      <hr />
      <p>
        <b>Title:</b> {props.title}
      </p>
      <p>
        <b>Style:</b> {props.style}
      </p>