React. How to collect and transfer the collection of nodes as props to children

Question

So, I try to collect the nodes after that the page are builded in the module iteamsHolder . It works for main App component and it see all collected iteams when I invoke the module iteamsHolder inside it.

But when I try to transfer the iteamsHolder module with iteams to children componennts of App , I have an error or undefined for this module iteams. So, I understand that the problem is in the component queue render. But how we can solve that error?

/* MAIN APP COMPONENT */

import iteamsHolder from '../view/iteamsHolder'
import sidebarWidgetHide from '../view/sidebarWidgetHide'

class App extends React.Component {
  constructor(props) {
    super(props);

    this.handleKeyCode = this.handleKeyCode.bind(this);
    this.handleClick = this.handleClick.bind(this);
 }


  render() {
    return (
      <Fragment>
        <Preloader/>
        <LeftSideInfo state={this.state.toggle} updateState={this.updateState} 
             coordY={this.state.coordY}/>
        <MenuButtonOpen state={this.state.toggle} updateState={this.updateState} 
             iteamsHolder={iteamsHolder().iteamsMain}/> // this is where I'm 
                                    // trying to transfer the iteams module.
      </Fragment>
    )
  }

/* ITEAM HOLDER MODULE */

const iteamsHolder = () => {
    if (document.readyState === "complete") {    
        let iteamsMain = {
            sidebar: document.querySelector('.left-side__column'),
            rightColumn: document.querySelector('.right-side__column')
        };

        let iteamsSupport = {
            header: document.querySelectorAll('.menu-button__container'),
            menuButton: document.querySelectorAll('.menu-button'),
            menuName: document.querySelector('.personal-name'),
            experienceblock: document.querySelector('.block-headline.block-headline__experience')
        }; 

        return { iteamsMain, iteamsSupport };
    } else {
        return 'Sorry';
    }

};

export default iteamsHolder;

/CHILD COMPONENT WITH NESTED ITEAMS MODULE/

class MenuButtonOpen extends React.Component {
constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.handleScroll = this.handleScroll.bind(this);
}

render() {
    return ( 
    {console.log(this.props.iteamsHolder)} // undefined of error
    )
}

Answer 1

You're getting undefined because iteamsHolder is returning the default value 'Sorry' , not the object { iteamsMain, iteamsSupport } . If you change is to:

<MenuButtonOpen
  state={this.state.toggle}
  updateState={this.updateState}
  iteamsHolder={iteamsHolder()}
/>

you'll see that 'Sorry' is being passed to the component. This is because when iteamsHolder is being evaluated, the webpage is not yet fully loaded. Without knowing why you've structured your code the way you did, I can't make a good suggestion on how to "fix" it. What may help is looking at how document.readyState works and reading through suggestions like what's listed here .