Skip to content

Instantly share code, notes, and snippets.

💭
Pushing code

Ben Kissi benkissi

💭
Pushing code
Block or report user

Report or block benkissi

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View context_blog_gist_10.js
const DisplayTodos = props => {
return (
<AppConsumer>
{({ todos, completed }) => {
const notCompleted = todos.filter(todo => {
if (todo.completed === false) {
return todo;
}
});
View context_blog_gist_9.js
const TodoInput = props => {
let todo;
return (
<AppConsumer>
{({ addTodo }) => (
<form
onSubmit={e => {
e.preventDefault();
}}
>
View context_blog_gist_8.js
class TodoApp extends Component {
render() {
return (
<div className="todos">
<Grid columns={1} className="ui center aligned">
<Grid.Row>
<Grid.Column className="todo-body" width={12}>
<h2>Simple Todo</h2>
<TodoInput />
<div id="display-todos">
@benkissi
benkissi / todo.js
Last active Apr 15, 2019
Context blog
View todo.js
import React, { Component } from "react";
import { AppConsumer } from "./app-context";
import { Grid, Button, Input } from "semantic-ui-react";
const TodoInput = props => {
let todo;
return (
<AppConsumer>
{({ addTodo }) => (
<form
View context_blog_gist_7.js
const rootElement = document.getElementById("root");
ReactDOM.render(
<AppProvider>
<TodoApp />
</AppProvider>,
rootElement
);
View context_blog_gist_6.js
const AppConsumer = AppContext.Consumer;
export { AppProvider, AppConsumer };
View context_blog_gist_5.js
render() {
return (
<AppContext.Provider
value={{
todos: this.state.todos,
addTodo: this.addTodo,
completed: this.completed
}}
>
{this.props.children}
View context_blog_gist_5.js
completed(id) {
const { todos } = this.state;
todos.forEach(todo => {
if (todo.id === id) {
todo.completed = !todo.completed;
}
});
this.setState({
todos: todos
});
View context_blog_gist_4.js
addTodo(todo) {
const { todos } = this.state;
const newTodo = {
id: Math.floor(Math.random() * (1000 - 1)) + 1,
todo: todo,
createdAt: Date.now(),
completed: false
};
this.setState({
todos: todos.concat(newTodo)
View app_context.js
import React, { Component } from "react";
const AppContext = React.createContext();
class AppProvider extends Component {
constructor(props) {
super(props);
this.state = {
todos: []
};
this.addTodo = this.addTodo.bind(this);
this.completed = this.completed.bind(this);
You can’t perform that action at this time.