Component inheritance

Components are just classes. In fact, when you implement a component using ES2015 class syntax, you extend the base Component class from React. You can keep on extending your classes like this to create your own base components.

In this section, you'll see how your components can inherit state, properties, and just about anything else, including JSX markup and event handlers.

Inheriting state

Sometimes, you have several React components that use the same initial state. You can implement a base component that sets this initial state. Then, any components that want to use this as their initial state can extend this component. Let's implement a base component that sets some basic state:

import React, { Component } from 'react'; 
import { fromJS } from 'immutable'; 
 
export default class BaseComponent extends Component { 
  state = { 
    data: fromJS({ 
      name: 'Mark', 
      enabled: false, 
      placeholder: '', 
    })...