how to set react parent component state by a async function and then pass this state to child as props?

Question

so i want to set the access by firebase function and then pass this access props to tabs component as props ,but tabs component is get the initial state null,firebase auth funtion is resolving after that .

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(){
return <Tab access={this.state.access}/>
  }
}

btw. you could just use `this.setState({ access: true })`, function argument is useful if you want to act on possible new state values at the moment the new state is being applied ([docs](https://reactjs.org/docs/react-component.html#setstate)) — Łukasz Godziejewski, Sep 23 '18 at 10:57

score 1 · Answer 1 · answered Sep 23 '18 at 10:41

1

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>

answered Sep 23 '18 at 10:41

Sagiv b.g

30,379
9
68
99

Shubham Gupta · Answer 2 · 2018-09-23T10:50:40.743

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'}

score 0 · Answer 3 · answered Sep 23 '18 at 13:44

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}/>
  }
}

how to set react parent component state by a async function and then pass this state to child as props?

3 Answers3