React component masquerading as a function

Question

Can anyone please help me understand what is going on here in some code I need to refactor.

I have a component which looks pretty ordinary such as this:

export default class MyContainer extends PureComponent {
  //props
  //state
  //render()
  //etc.
}

This is then passed in as props to another component like this:

export class ParentContainer
render() {
    return (
      <div>
        <Tabs
          home={MyContainer}
        />
      </div>
    );
  }
}

but what's got me confused is inside Tabs, it requires a function.

export default class Tabs extends PureComponent {
   static propTypes = {
    home: func.isRequired,
  }
}

This raises many questions for me:

What does this home={MyContainer} do? Just instantiate a component inline with all default props maybe? I haven't seen that syntax before. And why is this component acting as a function. Is there something going on behind the scenes like react is implicitly converting the component to the render() function perhaps?

If I try instantiate it in the 'normal' way so that I can add some new props i.e. {<MyContainer />} I get a runtime error saying that Tabs is expecting a function? Should I just change the Tabs to expect an object to get this working?

Dinesh Pandiyan · Accepted Answer · 2018-12-06 16:12:32Z

1

What does this home={MyContainer} do?

The component MyContainer is passed as a prop to Tabs component. Tabs will in turn decide when to render MyContainer component.

And why is this component acting as a function. Is there something going on behind the scenes like react is implicitly converting the component to the render() function perhaps?

React Components are ES6 classes. All classes in JavaScripts are functions by nature. The class syntax is just a syntactic sugar to define a function. That's why home: func.isRequired means, a component should be passed to home prop.

If I try instantiate it in the 'normal' way so that I can add some new props i.e. {< MyContainer />} I get a runtime error saying that Tabs is expecting a function? Should I just change the Tabs to expect an object to get this working?

No. When you pass {< MyContainer />} to home, you are trying to execute the component while setting it in home prop. You should only pass the reference to the home prop like this home={MyContainer}

answered Dec 6, 2018 at 16:12

Dinesh Pandiyan

6,3293 gold badges36 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

orion_kid Over a year ago

So, is there any way now to pass in a reference to a callback function in the parent component ? I really need this child component to be able to alter the state of the parent e.g pseudo code {MyContainer onSwitch=this.onSwitch}

Dinesh Pandiyan Over a year ago

You can try home={() => < MyContainer propName={'value'} />}

Collectives™ on Stack Overflow

React component masquerading as a function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related