12

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>
cmwall
  • 457
  • 2
  • 6
  • 15
  • 1
    Possible duplicate of [How can i block a React component to be rendered until I fetched all informations?](http://stackoverflow.com/questions/35022922/how-can-i-block-a-react-component-to-be-rendered-until-i-fetched-all-information) – azium May 18 '16 at 19:45

1 Answers1

24

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.

Aaron Beall
  • 49,769
  • 26
  • 85
  • 103
  • Direct link to conditional render statement docs: https://reactjs.org/docs/conditional-rendering.html – Rob Sep 20 '20 at 00:35