Provide alternative render method for React Component

Question

In my app I have several form field components that all behave the same way but look slightly different. I want to be able to use the state and class methods of a single formfield component while providing some sort of alternative render method so that I can customize the appearance of this element on the fly. I know I can wrap children and then use the props.children in the component. But I'm looking to re-use the components methods somehow:

class Parent extends React.Component {
  render() {
    <div className="parent">
      <ChildFormField
        renderAlternate={self => {
          return (
            <div className="child--alternate">
              <input onChange={self.doThing} />
            </div>
          );
        }}
      />
    </div>
  }
}

// And the child component look something like...
class ChildFormField extends React.Component {
  state = {
    value: null
  }

  doThing = value => {
    return this.setState({ value });
  }

  render() {
    if (this.props.renderAlternate !== undefined) {
      return this.props.renderAlternate();
    }

    // standard return
    return <div />;
  }
}

I'm relatively new to React outside of its basic usage. Is there a recommended way to achieve this functionality?

Answer 1

Your renderAlternate function expects a parameter self. So you need to pass this when calling it.

return this.props.renderAlternate(this);

See https://codesandbox.io/s/w759j6pl6k as an example of your code.