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

react setstate async await
how to update parent state from child component in react native
how to update parent state from child component in react js
react async render
update parent state from child react hooks
react pass state as props to child components
react: pass a callback as props
pass state from child to parent react

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

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>

Passing Data Between React Components - Ruth M. Pardee, (see above example). The sibling can then use the data as a prop. Inside a React component, you have two categories of data - props and state - props are simply properties that are passed by the parent component. They stay fixed throughout the life of the component. In the other hand, state is data that changes overtime. Think of props like function parameters and state like local variables.

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

How to pass props to components in React, How do you pass state props in state of react? React hooks are introduced in React 16.8. If you are familiar with the class components then there is no difference to change the parent component state from child component. In both cases, you have to pass the callback function to the parent. Let’s take a very simple example to understand it. We will take two components, Parent and Child.

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

ReactJS, , but only from parent to child components down the component tree. You can create a method in parent that accepts some data and then sets the received data as parent state. Then pass this method to child as props. Now let the method accept child state as input and then let the method set the received child state as parent state.

Props vs State in React, What is the difference between state and props in react? This way the child can update the parent's state with the call of a function passed with props. But you will have to rethink your components' structure, because as I understand components 5 and 3 are not related.

React, updating state in child component using props after async , on the other hand is still variables, but directly initialized and managed by the component. This Provider mantains the state (data to be used by both components and some callback used to manipulate the states) and returns a contextObject.Provider JSX component ) Step 2: Pass the state and the callback function as props to all children inside the Provider Component.

freeCodeCamp/pass-state-as-props-to-child-components.english , The first child component render some props like lat and lng are null, then you can do something like: Not sure why you use async/await instead of a normal fetch/axios call. propertyYouWantToCheck){ // set your state/logic here } } in the parent component and pass it down to the child component. Line 1: We import the useState Hook from React. It lets us keep local state in a function component. Line 4: Inside the Example component, we declare a new state variable by calling the useState Hook. It returns a pair of values, to which we give names. We’re calling our variable count because it holds the number of button clicks.

Comments
  • 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)