Skip to content

Instantly share code, notes, and snippets.

🏠
Working from home

Alexandr alexandrzavalii

🏠
Working from home
Block or report user

Report or block alexandrzavalii

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@alexandrzavalii
alexandrzavalii / group-objects-by-property.md
Created Aug 16, 2019 — forked from JamieMason/group-objects-by-property.md
Group Array of JavaScript Objects by Key or Property Value
View group-objects-by-property.md

Group Array of JavaScript Objects by Key or Property Value

Implementation

const groupBy = key => array =>
  array.reduce((objectsByKeyValue, obj) => {
    const value = obj[key];
    objectsByKeyValue[value] = (objectsByKeyValue[value] || []).concat(obj);
    return objectsByKeyValue;
View Composition_functions.js
// DumboParent.js
return (
<Dumbo
availableShoes={availableShoes}
firstChild={clothing => <FirstChild clothing={clothing} lollipops={this.state.lollipops} />}
secondChild={clothing => <SecondChild clothing={clothing} />}
/>
)
// Dumbo.js
View Composition.jsx
import React from "react";
import FirstChild from "./FirstChild";
import SecondChild from "./SecondChild";
class DumbosParent extends React.Component {
state = { availableShoes: 6, lollipops: 9 };
render() {
const { availableShoes, lollipops } = this.state;
return (
View pass_object_to_context.js
/* DumboParent.js */
class DumbosParent extends React.Component {
state = { availableShoes: 6, lollipops: 9 };
eatCandy = (quantity = 0) => {
this.setState(({ lollipops }) => ({
lollipops: lollipops - quantity
}));
};
View connect_method.js
/* HOC for wrapping the component with Context Provider */
const connect = Component => {
return function WrappedComponent(props) {
return (
<CandyContext.Consumer> /* pass lollipops as a prop */
{value => <Component {...props} lollipops={value} />}
</CandyContext.Consumer>
);
};
};
View introducing_context.js
// create Context
const initialAmountOfLollipops = 0;
const LollipopContext = React.createContext(initialAmountOfLollipops);
/* ... Dumbo's parent Component */
const { lollipops } = this.state;
return (
// instead of passing lollipops to Dumbo, we pass it to the Context.Provider
<CandyContext.Provider value={lollipops}>
<Dumbo availableShoes={availableShoes} /* lollipops={lollipops} */ />
View complex_logic.jsx
/* Dumbo's parent component */
const { lollipops } = this.state;
return (
<div>
<Dumbo availableShoes={availableShoes} lollipops={lollipops} />
</div>
);
/* Dumbo component */
render () {
View renaming_props.jsx
/* parent component */
const { lollipops } = this.state;
return (
<div>
<Dumbo availableShoes={availableShoes} candys={lollipops} />
</div>
);
/* Dumbo component */
const { candys } = this.props;
View parent_component_lollipop.js
class DumbosParent extends React.Component {
state = { availableShoes: 6, lollipops: 2 };
/* sellShoes */
render() {
const { availableShoes, lollipops } = this.state;
return (
<>
/* rest of code */
<Dumbo availableShoes={availableShoes} lollipops={lollipops} />
</>
View parent_component.js
class DumbosParent extends React.Component {
state = { availableShoes: 6 };
sellShoes = () => {
this.setState(({ availableShoes }, props) => ({
availableShoes: availableShoes > 1 && availableShoes - 1
}));
};
render() {
You can’t perform that action at this time.