Skip to content

Instantly share code, notes, and snippets.

@mbeaudru
Created August 20, 2018 15:19
Show Gist options
  • Save mbeaudru/2539975317e6eec73c3987640ca8a930 to your computer and use it in GitHub Desktop.
Save mbeaudru/2539975317e6eec73c3987640ca8a930 to your computer and use it in GitHub Desktop.
@Medium - Render Props are the new Controllers / Container sample
import React, { Component, Fragment } from "react";
import TodosController from "../controllers/TodosController";
import TodoItem from "./TodoItem";
class TodosContainer extends Component {
state = {
todoInput: ""
};
updateTodoInputValue = value => this.setState({ todoInput: value });
onTodoInputChange = e => {
this.updateTodoInputValue(e.target.value);
};
onTodoCreate = onCreateCallback => () => {
const todoItem = {
id: Math.random() * 1000000,
label: this.state.todoInput
};
onCreateCallback(todoItem);
this.updateTodoInputValue("");
};
render() {
const { todoInput } = this.state;
return (
<TodosController as="ul">
{({ todos, onClick, onCreate }) => {
return (
<Fragment>
{todos.map(todo => (
<TodoItem key={todo.id} todo={todo} onClick={onClick(todo)} />
))}
<input
type="text"
value={todoInput}
onChange={this.onTodoInputChange}
/>
<button onClick={this.onTodoCreate(onCreate)}>Create</button>
</Fragment>
);
}}
</TodosController>
);
}
}
export default TodosContainer;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment