mixingStateWithRenderProps.js

// Before with a higher order component.
import React from 'react';

class UserCreateEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: props.user
    }
  }
  onChange = () => {}
  submit = () => {}
  render(){
    return 
      <form onSubmit={this.onSubmit}>
        <input type="text" value={user.firstName} placeholder={'firstName'} onChange={this.onChange('firstName')} />
        
      </form>}
  }
}

export default withUser(UserCreateEdit)

//After with Render Props how to populate state of this component?
import React from 'react';

class UserCreateEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: ???
    }
  }
  onChange = () => {}
  submit = () => {}
  render(){
    return <FetchUser>
      {({user}) =>
        <form onSubmit={this.onSubmit}>
          <input type="text" value={user.firstName} placeholder={'firstName'} onChange={this.onChange('firstName')} />
        </form>
      }
    </FetchUser>
  }
}

export default withUser(UserCreateEdit)
  
//After: 👍 Manage form state below in another component.
import React from 'react';

class UserCreateEdit extends React.Component {
  submit = () => {}
  render(){
    return <FetchUser>
      {({user}) => <UserEditForm user={user} onSubmit={this.submit}>}
    </FetchUser>
  }
}