pd-render-props.js

// TodoPage.js
class TodoPage extends React.Component {
  state = {
    todos: [
      { id: 1, desc: 'Check email', completed: false },
      { id: 2, desc: 'Write blog post', completed: false },
    ],
    user: { name: 'John', canDelete: true },
  };

  handleDelete = todo => {
    const todos = this.state.todos.filter(t => t.id !== todo.id);
    this.setState({ todos });
  };

  render() {
    const { todos, user } = this.state;
    return (
      <div>
        <TodoList
          todos={todos}
          renderItem={todo => (
            <TodoItem
              todo={todo}
              onDelete={this.handleDelete}
              canDelete={user.canDelete}
            />
          )}
        />
      </div>
    );
  }
}


// TodoList.js
const TodoList = ({ todos, renderItem }) => {
  return (
    <div>
      <Title value="Todo List" />
      <div>{todos.map(todo => renderItem(todo))}</div>
    </div>
  );
};

TodoList.propTypes = {
  todos: PropTypes.array,
  renderItem: PropTypes.func,
};


// TodoItem.js
const TodoItem = ({ todo, onDelete, canDelete }) => {
  return (
    <div>
      <div>{todo.desc}</div>
      <div>
        <button disabled={!canDelete} onClick={() => onDelete(todo)} />
      </div>
    </div>
  );
};

TodoItem.propTypes = {
  todos: PropTypes.object,
  onDelete: PropTypes.func,
  canDelete: PropTypes.bool,
};