Settled in old ways. Try React render.props for something different

It’s easy to get settled into a way of thinking. Maybe it’s time that holds you back, or lack of desire. But if you’re like me, you are an unseasoned developer and you just haven’t got to it yet because of how much you’re already learning. Obviously that’s no excuse but sometimes it’s just what happens.

That being said let’s talk a little bit about React’s render.props. I will reference React’s tutorial throughout this blog. So personally, I had never used render.props before. It wasn’t until I received a code challenge, from a hiring company, that I really even knew what it was. So what is render.props?

Ok that’s a little extreme. But before the code challenge to be honest I didn’t know what it was.

So React describes it this way -

The term “render prop” refers to a simple technique for sharing code between React components using a prop whose value is a function.

So what does that look like?

<Example render={passedData => (
  <h1>Hello {passedData.firstName}</h1>
)} />

render.props are great at helping with cross-cutting concerns. What are cross-cutting concerns you ask? Yeah I wasn’t sure either so wiki to the rescue.

In aspect-oriented software development, cross-cutting concerns are aspects of a program that affect other concerns. These concerns often cannot be cleanly decomposed from the rest of the system in both the design and implementation, and can result in either scattering (code duplication), tangling (significant dependencies between systems), or both.

Here is a great Stack Overflow article about it also. Another great aspect is the fact you can actually do the same thing with render.props as you can using a HOC design. One more article coming your way written by Michael Jackson about replacing HOC with render.props.

Let’s take it a step further then our previous code. I won’t go into the code challenge at all because maybe they use that same code challenge with other prospective developers. Let’s just make something up as we go.

class ExampleForm extends React.Component {
  render() {
    return (
      <form>
        <label>First Name:
          <input
            type='text'
            onChange={this.props.handleInputChange}
            name='first name'
          />
        </label>
        <label>Last Name:
          <input
            type='text'
            onChange={this.props.handleInputChange}
            name='last name'
          />
        </label>
      </form>
    )
  }
}
class PassInputValues extends React.Component {
  constructor() {
    super();
    this.state = {
      'first name': '',
      'last name': ''
    }
    this.handleInputChange = this.handleInputChange.bind(this);
  }
  handleInputChange(e) {
    const target = e.target;
    const value = target.value;
    const name = target.name;
    this.setState({
      [name]: value
    )}
  }
  render() {
    return (
      <div>
        <ExampleForm
          handleInputChange = {this.handleInputChange}
        />
        {this.props.render(this.state)}
      </div>
    )
  }
}
const LayoutOptions = (props) => {
  if (props.result['first name'] === 'Rachel' && props.result['last name'] === 'Cole') {
    return <div>Hey your my wife!</div>
  }
    return <div>I don't think I know {props.result['first name']}. Nice to meet you!</div>
}
const WrappedLayout = () => {
  return (
    <PassInputValues render={result => (
      <LayoutOptions result={result} />
    )} />
  )
}

We kind of see what’s going on here. First we have a form with inputs for a person to type their names. Plus onChange function is passed as a prop to this component. Then the state is changed inside the parent component through the handleInputChange method. Then we pass state as a render prop to the child component which in this case will be LayoutOptions. Pretty straight after you look at it for a little while.

So you don’t have to name it render though if you don’t want to. You can really name it anything you need to that would make sense. Or you could use the children prop. Then you don’t need to list the children prop inside the list of attributes. Here is an example.

<Mouse>
  {mouse => {
    <p>The mouse position is {mouse.x}, {mouse.y}</p>
  )}
</Mouse>

Something to be careful of when working with render.props is with React.PureComponent.

Well I think that’s it for me this blog post. On to the next. We will see what comes. As always leave any comments or questions you have at the bottom. Thanks. Until next time I’m outta here.