singhArmani

import React from "react";
import ComponentB from "./componentB";

const someArbitaroryObj = {
  name: 'object has no name',
  someArray: [
    {
      id: 'aman',
      color: "red",
      value: {

singhArmani

const someArbitraryObj = {
  name: "object has no name",
  someArray: [
    {
      id: 1,
      color: "red",
      value: {
        nestedValue: 20
      }
    },

singhArmani

import { object, array, shape, string, arrayOf, number } from "prop-types";

// inside ComponentB
static propTypes = {
    values: shape({
      name: string,
      someArray: arrayOf(
        shape({
          id: number.isRequired, // if passed props doens't have this id,

singhArmani

import React from "react";
import { arrayOf, shape, number } from "prop-types";
import { map } from "lodash";

const ComponentC = props => {
  const list = map(props.list, el => {
    return (
      <h3 key={el.id}>
        color: {el.color} --- value: {el.value.nestedValue}
      </h3>

singhArmani

import React from "react";
export default class Counter extends React.PureComponent {
  state = {
    count: 0 // initial state
  };

  handleIncrement = () => {
    // as increment count depends on previous count value, 
    // we should use updater function
    this.setState(prevState => ({

singhArmani

// Inside parent component
  state = {
    isLoading: true,
    posts: [],
    isErrorLoading: false,
    error: null
  };

  // rendering logic handles by Parent Component (if statements)
  // but the actual rendering job is handled by nested components

singhArmani

componentDidMount() {
    setTimeout(() => {
      // checking if component hasn't been unmounted and 
        // thus it's safe to call setState
      if(!this.isUnMounted) {
         this.setState({
        value: 20
      });
      }
    }, 1000);

singhArmani

import React from "react";
import Rx from "rxjs/Rx";

export default class Reactive extends React.PureComponent {
  state = {
    subject: null,
    subcription: null,
    value: 0
  };

singhArmani

export default function HOC(WrappedComponent){
  return class EnhancedComponent extends Component {
   /* 
     Encapsulate your logic here...
   */
    
    // render the UI using Wrapped Component
    render(){
      return <WrappedComponent {...this.props} {...this.state} />
    }

singhArmani

export default class RenderProps extends Component {
/* 
  Encapsulate your logic here...
*/

  render(){
    // call the functional props by passing the data required to render UI
    return this.props.render(this.state)
  }
 }