How to extend a React component?

by

In the ES6/JSX/React world, you can extend component behaviors and values in many ways. I’d recommend one of the following, considering that you use Material UI.

First case:

You have two components that extend the Component from React:

class ExampleComponent extends React.Component {
  render () {
    return(
      <div>
        <button {...this.props}>
          Click me!
        </button>
      </div>
    )
  }
}

class RenderComponent extends React.Component {
  clickHandler () {
    console.log('Click fired!')
  }

  render () {
    return(
      <ExampleComponent onClick={this.clickHandler.bind(this)} />
    )
  }
}

In that example, onClick is passed via props inside the rendered ExampleComponent. Example here.

Second case:

This is similar on how Material UI extends their own components:

class ExampleComponent extends React.Component {
  clickHandler () {
    console.log('Click fired!')
  }
}

class RenderComponent extends ExampleComponent {
  render () {
    return(
      <div>
        <button onClick={this.clickHandler.bind(this)}>
          Click me!
        </button>
      </div>
    )
  }  
}

In this example, you have one component that extends Component from React but only has event methods. Then, you extend this component and render your own with the extended behavior. Here is a live example.

Hope it helps!

Leave a Comment