Use React Components as Children for Other Components

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 ( <div> <input type="text" onChange={props.update} /> <h1>{props.txt}</h1> </div> ); }

becomes...

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

Best regards,

Ed

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

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.

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!

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