Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 829 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Use React Components as Children for Other Components

1:33 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

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

Important feature of React is the fact a React component can output or render other React components. We've got a very simple component here. It has a state with a value of txt. It's got an update method which is going to update that value of text from an event.

App.js

import React from 'react';

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      txt: 'this is the state text'
    }
  }
  update(e){
    this.setState({txt: e.target.value})
  }
  render(){
    return (
      <div>
        <h1>{this.state.txt}</h1>
        <input type="text"
          onChange={this.update.bind(this)} />
      </div>
    )
  }
}

In our JSX, we're outputting our state.text value. We're also outputting an <input> and its onChange event is tied to our update event. I'm going to save that. We're going to try it out in the browser. Anything I type here is going to update the state.text.

state.text

What we're going to do is we're going to create a new component. This is going to be a stateless function component. We're going to call it Widget. It's going to take in props. We're going to return this input JSX right here. We're just going to drop that down there, get this guy into one line.

class App extends React.Component {

  ...

  render(){
    return (
      <div>
        <h1>{this.state.txt}</h1>
        <Widget update={this.update.bind(this)} />
      </div>
    )
  }
}

const Widget = (props) => 
  <input type="text" onChange={this.update.bind(this)} />

Here where we had our input, we're going to go ahead and render a Widget component. We can self-close that. We're just going to have an update prop and into that we're going to pass this.update.bind(this).

Now, down here, where we had this.update.bind(this), we're going to go ahead and just say props.update, since it's passed in as a prop and we don't need the binding.

const Widget = (props) => 
  <input type="text" onChange={props.update} />

We'll save that. Here in the browser when we type, our child component is updating the state of our parent component.

This also means that we could have a few of these guys on the page and every time we type in one of them, it'll update the value in our parent component.

render(){
    return (
      <div>
        <h1>{this.state.txt}</h1>
        <Widget update={this.update.bind(this)} />
        <Widget update={this.update.bind(this)} />
        <Widget update={this.update.bind(this)} />
      </div>
    )
  }


HEY, QUICK QUESTION!
Joel's Head
Why are we asking?