Menu
I am declaring a component inside of a parent component. I want to establish specific props in one file, and then in the parent component, I want to be able to establish the other props for the child components all at once (since they are shared properties.. for the most part).
My problem is that the child component attempts to render and fails since the required prop types aren't being established at first.
Is there a way to tell the child component to wait for the required props to render?
In the ParentComponent render function, I call another function to run React.Children.map() and append props to ChildComponent.
The (rough) section where the child component is being rendered:
<ParentComponent>
<ChildComponent
attribute="test_attribute"
label="Child Component"
type="number"
width={3}
/>
</ParentComponent>
787
To wait for a ReactJS component to finish updating, we use a loading state in our react application by use of the conditional rendering of the component. This can be achieved by the use of the useState and useEffect hooks in the functional components.
You can use the async/await syntax or call the . then() method on a promise to wait for it to resolve. Inside of functions marked with the async keyword, you can use await to wait for the promises to resolve before continuing to the next line of the function.
Every time the “Resize” button is clicked and the setState function is called, the componentDidUpdate function starts running, and the component gets updated. Also, you can use componentDidUpdate to get the ref to the div DOM element and adjust the basic dimensional properties like width and height.
Use the useEffect hook to wait for state to update in React. You can add the state variables you want to track to the hook's dependencies array and the function you pass to useEffect will run every time the state variables change.
You can use a conditional render statement to only render the child when the props are populated:
let {foo, bar} = this.props;
<ParentComponent>
{ foo && bar ? <ChildComponent foo={foo} bar={bar} /> : null }
</ParentComponent>
Or instead of null you could render a <LoadingSpinner /> or something.
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
