sezgi

const Shrubbery = () => {
  const [price, setPrice] = useState(0);
  
  return (
    <div>
      Too expensive? {price}
      <button onClick={() => setPrice(price - 10)}>Bargain</button>
    </div>
  );
}

sezgi

const enhance = withState('price', 'setPrice', 0);
const Shrubbery = enhance(({ price, setPrice }) => (
  <div>
    Too expensive? {price}
    <button onClick={() => setPrice(n => n - 10)}>Bargain</button>
  </div>
));

sezgi

// Redux's `connect`
const ConnectedShrubbery = connect(mapStateToProps, actionCreators)(Shrubbery);

sezgi

const withLooksNice = BaseComponent => props => <BaseComponent looksNice={true} {...props} />;

const Shrubbery = ({price}) => <div>Too expensive? {price}</div>;
  
const NiceShrubbery = withLooksNice(Shrubbery);

sezgi

// Functional component
const Shrubbery = ({price}) => <div>Too expensive? {price}</div>;

sezgi

// Class component
class Shrubbery extends Component {
   render() {
      return <div>Too expensive? {this.props.price}</div>;
   }
}

sezgi

function addSlug(sluglessObject) {
  return {
    ...sluglessObject,
    slug: '🐌'
  }
  // sluglessObject hasn't changed
}

sezgi

function slugify(myString) {
  return myString.trim().toLowerCase().replace(/\s+/g, '🐌');
  // myString hasn't changed
}

sezgi

// removes your box from the page so you don't get removed from the group
$$('[data-name=GroupProfileGridItem]')[0].remove();
 
// member action dropdowns
const actions = $$('.adminActions');
 
// open all dropdowns so they're added to the DOM
for (var i = 0; i < actions.length; i++) {
  $$('.adminActions a')[i] && $$('.adminActions a')[i].click();
}

sezgi

// using http://johnm.io/project/hamburgler/

$(function () {
  var open = false;

  function toggleScroll () {
    if (open) {
      $('.body-wrap').height($('.hamburger-nav')[0].scrollHeight).css('overflow', 'hidden');
    } else {
      $('.body-wrap').height('auto').css('overflow', 'visible');