Too many React Context providers

Question

New to react here and trying to wrap my head round the new Context API (I haven\'t looked into Redux etc. yet).

Seems I can do much of what I need to do, but I\'m going

Answer 1

Few lines of code solve your problem.

import React from "react"
import _ from "lodash"

/**
 * Provided that a list of providers [P1, P2, P3, P4] is passed as props,
 * it renders
 *
 *    
        
          
            
              {children}
            
          
        
      
 *
 */

export default function ComposeProviders({ Providers, children }) {
  if (_.isEmpty(Providers)) return children

  return _.reverse(Providers)
    .reduce((acc, Provider) => {
      return {acc}
    }, children)
}