React Component wait for required props to render

Question

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>

Answer 1

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.