Annotated TodoItem component

todoItem.js

import React from 'react';
import PropTypes from 'prop-types';
import './todoItem.css';

// Export named class individually for better unit test integration
export class TodoItem extends React.Component {
  // No need for a constructor because all it was doing was calling super, so it wasn't actually overriding the parent constructor
  
  // Assign to an arrow function - see https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578
  removeToDo = () => {
    this.props.remove(this.props.id);
  }
  
  render() {
    return (
      <div className="itemWrapper">
        <button className="removeButton" onClick={this.removeToDo}>remove</button>
        {this.props.todo.text}
      </div>
    );
  }
}

// Validate component inputs and expose what this component needs in order to operate - see https://www.npmjs.com/package/prop-types
TodoItem.propTypes = {
  id: PropTypes.number.isRequired,
  remove: PropTypes.func.isRequired,
  todo: PropTypes.shape({ 
    text: PropTypes.string.isRequired
  }).isRequired
};

// If you need to use a HOC, such as redux's connect, use it for only the default export
export default TodoItem;