reactjs - Need better suggestion for naming wrapping components in React

Question

I often find that I want to have a react wrapping component around another component because of the nature of how React Hooks works with React Context. That is, if I have dependencies such that I want to use two different contexts (that are based on hooks) where one depends on the other I need to create a wrapping component as I'm showing below.

My question/problem is what to name the "inner" or "child" component. Both InnerComponent and ChildComponent don't feel like good choices. Suggestions?

const LayoutChild = ({ year, children, codeCampYears }) => {
  const [state, send, service] = useMachine(svccUiMachine, codeCampYears)
  const machine = [state, send, service];
  return (
    <SvccUiMachineContext.Provider value={machine}>
      {children}
    </SvccUiMachineContext.Provider>
  );
};

const Layout = ({ year, children }) => {
  const { data, loading } = useAuthInfo();
  return (
      <LayoutChild year={year} codeCampYears={codeCampYears}>
        {children}
      </LayoutChild>
  );
};

export default Layout;

The above code is not exactly right, but the idea is that I'm exporting for consumption just the Layout component, and it uses LayoutChild and I'm not liking that name.

question from:https://stackoverflow.com/questions/65904606/need-better-suggestion-for-naming-wrapping-components-in-react

Answer 1

Waitting for answers