The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Use React Components as Children for Other Components

Use React Components as Children for Other Components

1:33
The owner-ownee relationship is used to designate a parent-child relationship with React components as it differs from the DOM relationship. This lesson demonstrates how composable React can be when using stateless functions to display data.
Watch this lesson now
Avatar
egghead.io

The owner-ownee relationship is used to designate a parent-child relationship with React components as it differs from the DOM relationship.

Avatar
Mark

Which component owns which component?

In reply to egghead.io
Avatar
leonardo

I think component app owns component widget

In reply to Mark
Avatar
Ed

Hi Joe,

Excellent lessons.

One thought...

In the Widget, can we eliminate the "function" and "return" statements as per ECMAScript 2015

so that...

const Widget = function(props) {
return (


{props.txt}

);
}

becomes...

const Widget = (props) =>
(


{props.txt}

)

Best regards,

Ed

Avatar
James Scaggs

Can you give a real world example of when we would use this?

Avatar
Joseph

This is truly a core React methodology and you'll use it in every React application.

Tabs > Tab > TabContent
List > ListItem
Form > FormField
App > Page > Header + Content + Footer

The goal is usually to have a parent component keeping track of state while children components do not require state at all, but only props. This is often referred to as Smart Containers and Dumb Components.

In reply to James Scaggs
Avatar
Christopher

Hi Joseph, thanks for responding to James. Can you go a little deeper with this answer? What are the benefits of using a 'dumb component'?

'Widget' works if it's implemented as a class:

class Widget extends React.Component {
  render(){
    return (
      <div>
        <input type="text"
          onChange={this.props.update} />
        <h1>{this.props.txt}</h1>
      </div>       
    );
  }
}

What are the pitfalls or dangers of using Widget as a class and/or what are the benefits of using it as a dumb or stateless component?

Thanks in advance!

In reply to Joseph
Avatar
Joseph

The benefit of using stateless components is that, used properly, they are pure functions. No internal state or lifecycle methods, they return the same result every time and therefore offer no side effects. Also, stateless components usually equate to more reusable components with no concern about the logic of the application they are plugged into.

Pitfalls or dangers of class: None

In reply to Christopher
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?