CODEWITHSUNDEEP
javascriptclassinheritancereactjsecmascript-6
Artur Muller
Artur Muller

Reputation: 33

What ES6/React magic is used in this class inheritance?

Going through the TodoMVC example of Redux I have found this unusual example of class inheritance. The class Header is probably extending React.Component as per usual (as should all React components, right?), but it is not explicitly stated in the code. What am I missing? How does this code work? 

import React, { PropTypes } from 'react';
import TodoTextInput from './TodoTextInput';

export default class Header {
  static propTypes = {
    addTodo: PropTypes.func.isRequired
  };

  handleSave(text) {
    if (text.length !== 0) {
      this.props.addTodo(text);
    }
  }

  render() {
    return (
      <header className='header'>
          <h1>todos</h1>
          <TodoTextInput newTodo={true}
                         onSave={::this.handleSave}
                         placeholder='What needs to be done?' />
      </header>
    );
  }
}

Upvotes: 1

Views: 209

Answers (1)

Jonny Buchanan
Jonny Buchanan

Reputation: 62793

If you don't need the methods defined by ReactComponent (setState() and forceUpdate()) you don't have to inherit from it.

As such, it isn't an example of class inheritance or magic because neither is happening here :)

Upvotes: 5

Related Questions