How can I use context to selectively pass data down a component hierarchy? (2 approaches)

// OLD APPROACH

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

class Chapter extends Component {
  static childContextTypes = {
    pageTitle: PropTypes.string.isRequired,        // (1) Define a `pageTitle` to add to context
    paragraphTitle: PropTypes.string.isRequired    // (2) Define a `paragraphTitle` to add to context
  }
  getChildContext = () => ({
      pageTitle: 'page title',                     // (3) Add `pageTitle` to context
      paragraphTitle: 'paragraph title'            // (4) Add `paragraphTitle` to context

  })
  render = () => <Page /> 
}

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

class Page extends Component {
  static contextTypes = {
    pageTitle: PropTypes.string.isRequired         // (5) Expose `pageTitle` only to this component
  }
  constructor(props, context) {
    super(props)
    console.log('[x] context', context)            // (6) Context will only have `pageTitle` on it
  }
  render = () => {
    console.log('[x] this.context', this.context)  // (7) Context will only have `pageTitle` on it
    return <Paragraph />
  }  
}

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

class Paragraph extends Component {
  static contextTypes = {
    paragraphTitle: PropTypes.string.isRequired   // (5) Expose `paragraphTitle` only to this component
  }
  constructor(props, context) {
    super(props)
    console.log('[x] context', context)           // (6) Context will only have `paragraphTitle` on it
  }
  render = () => {
    console.log('[x] this.context', this.context) // (7) Context will only have `paragraphTitle` on it
    return <p>'All Done'</p>
  }  
}

The context object passed into Chapter will have pageTitle and paragraphTitle added to it

The context object passed into Page will only contain `pageTitle` on it.

The context object passed into Paragraph will only contain paragraphTitle on it.

/// NEW APPROACH

import React, { createContext } from 'react'

class MyContext = createContext()

class MyProvider extends Component {
    state = { name: 'henry' }
    render () => <MyContext.Provider>{this.props.children}</MyContext.Provider>
}

const App = () =>
    <MyProvider>
        <Family />
    </MyProvider>

const Family = () => 
    <div>
        <Person />
    </div>

const Person = () => 
    <MyContext.Consumer>
        {(context) => <p>{context.state.name}</p> }
    </MyContext.Consumer>