[Solved]-how to set react parent component state by a async function and then pass this state to child as props?-Reactjs

componentdidmount function is called after the render and even though you have your call in componentwillmount, since its an async call, it will only be resolved after the component render cycle has been triggered and hence the data will only have a value after render. in order to correctly handle such a scenario, you must conditionally render your data in the render.

class admin extends react.component {
  state = {
    access: null,
  };
  componentdidmount() {
    this.unlisten = firebase.auth().onauthstatechanged(user => {
      if (user) {
        this.setstate(() => ({ access: true }));

      }
    });
  }

  componentwillunmount() {
    this.unlisten();
  }

  render(){
    const { access } = this.state;
    if(access !== null) {
         return null;
    }
    return <tab access={this.state.access}/>
  }
}

you can do conditional rendering and not render the tabs until you get access:

return this.state.access 
    ? <tab access={this.state.access}/> 
    : <div>not authorized</div>

it should not be a problem. when you update the state, the component will re-render and all its children will also be re-rendered. if you don't want to render anything while access is null try the following code.

class admin extends react.component {
  state = {
    access: null,
  };
  componentdidmount() {
    this.unlisten = firebase.auth().onauthstatechanged(user => {
      if (user) {
        this.setstate(() => ({ access: true }));

      }
    });
  }

  componentwillunmount() {
    this.unlisten();
  }

  render(){
    const access = {this.state};
    return {access && <tab access={access}/>}
  }
}

or

{access ? <tab access={access}/> : 'not authorized'}