Question

163

React Component wait for required props to render

rated 0 times [ 166] [ 3] / answers: 1 / hits: 31278 / 8 Years ago, wed, may 18, 2016, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

oswaldoh

Add To Favorites

Follow

Total Points: 109

Total Questions: 93

Total Answers: 113

Location: Israel

Member since Wed, Apr 14, 2021

3 Years ago

answered 8 Years ago jazminuniquer · Accepted Answer

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.