List props of a nested react component

Question

I want to enumerate children props of a nested component without passing them over. Let's take a look at this example (pseudo code)

# JSX
<Root>
  <NodeWrapper />
</Root>

# NodeWrapper component
function NodeWrapper() {
  return <InnerNode myPropName="myPropValue" />
}

# Root component
function Root({children}) {
  // children.props > lists all NodeWrapper props
  // how to get a hold of InnerNode props, so that Root can detect prop `myPropName`?
}

The only way I found so far is to pass myPropName to NodeWrapper. Is there a way to grab myPropName value from within Root component without passing it down from Root to InnerNode through NodeWrapper?

I understand InnerNode will be available only when NodeWrapper is rendered, that is not the case as Root is being rendered and InnerNode is not rendered yet (i.e., it is a component and not yet an instance).

I think this question hides some React concept I am missing.

EDIT: Please note that my question is not to avoid prop drilling. Prop drilling and contexts are techniques to pass data down the component tree. What I want to do is quite the opposite: read a nested component props from the Root. The usage of Root.children gives me only NodeWrapper props, but I do actually would like to get InnerNode props from within Root component.

Did you hear about React Context ? Context provides a way to pass data through the component tree without having to pass props down manually at every level. — Mile Mijatović, Jul 25 '22 at 13:36
Yes, but I want to do the opposite. I want to read a nested component prop from the root, not to pass a prop down without drilling. If I drill the prop down, Root can read it form NodeWrapper component, but I would like to read them directly from InnerNode — Gabriele Buffolino, Jul 25 '22 at 13:38
So you want to pass data from child to it's parent ? See this topic - https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs — Mile Mijatović, Jul 25 '22 at 13:46
@MileMijatović actually not. I just edited my question hoping to shed some light on my intentions, as it seems I was unclear. Apologize for the confusion. — Gabriele Buffolino, Jul 25 '22 at 14:40

score 0 · Answer 1 · answered Jul 25 '22 at 13:39

I think you are trying to avoid props drilling that is passing props to children where it is not directly needed but it is needed inside some nested component. For this I would recommend to use Context it is great way to avoid prop drilling here how you can configure it

    import './App.css';
import { useContext } from 'react';

// In the login Component

const InnerComponent = () => {
  const authContext = useContext(MyContext);

  const handleLogin = () => {
    authContext.onAuthChange(true); // this will make the user login that change the value of auth to true
  }

  return (
    <div>Login JSX</div>
  )
}

const MyContext = React.createContext(null);

const NodeWrapper = () => <InnerComponent />


function App() {
  const [auth, setAuth] = React.useState(true);

  const handleAuthChange = (newAuthState) => {
    setAuth(newAuthState);
  }

  return (
    <MyContext.Provider value={{
      auth,
      onAuthChange: handleAuthChange
    }}>
     <NodeWrapper />
    </MyContext.Provider>
    
    
  );
}

export default App;

Thanks for your answer, but I am not trying to avoid prop drilling. I just want to read nested component props from the Root component. Perhaps I need to better shape my question as it is generating confusion. — Gabriele Buffolino, Jul 25 '22 at 13:41

List props of a nested react component

1 Answers1