State Provider for Dumb Components

StateProvides.js

import React, { Component } from 'react'
import { bool, object } from 'prop-types'


class StateProvides extends Component {
  state = {
    state: {},
    hydrated: false,
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    // set up the default state value based on props, only the first time
    // or if allowInitialStateUpdate is set
    if (!prevState.hydrated || nextProps.allowInitialStateUpdate) {
      return {
        ...prevState,
        state: {
          ...previousState.state,
          ...nextProps.state,
          },
        },
        hydrated: true,
      }
    }

    return null
  }

  setState = (newState) => {
    this.setState(s => ({
      state: {
        ...s.state,
        ...(
          typeof newState === 'function'
            ? newState(s.state)
            : newState
        ),
      },
    }))
  }
  
  render() {
    return this.children({
      state: this.state.state,
      setState: this.setState,
    })
  }
}

StateProvides.defaultProps = {
  allowInitialStateUpdate: false,
  state: {},
}

StateProvides.propTypes = {
  allowInitialStateupdate: bool,
  state: object,
}

export default StateProvides

xReallyDumbComponent.js

import React from 'react'
import { string } from 'prop-types'

import StateProvides from './StateProvides'


const ReallyDumbComponent = ({ title }) => (
  <StateProvides state={{ show: false }}>
    {({ state, setState }) => (
      <header>
        <h2>{title} - {state.show && <span>hidden</span>}</h2>
        <button
          onClick={() => setState(s => ({ show: !s.show }))}
        >
          Toggle
        </button>
      </header>
    )}
  </StateProvides>
)

ReallyDumbComponent.propTypes = {
  title: string.isRequired,
}

export default ReallyDumbComponent