zapkub

package main

import (
	"context"
	"fmt"
	"time"
)

func perform(ctx *context.Context, name string, out chan<- string) {
	for {

zapkub

// TodoCount.jsx
const TodoCount = () => {
  const store = React.useContext(TodoStoreContext);
  return (
    <span className="todo-count">
      <strong>{store.todos.length}</strong> item
      {store.todos.length === 1 ? "" : "s"} left
    </span>
  );
};

zapkub

// TodoInput.jsx
const TodoInput = () => {
  const [textInput, setTextInput] = React.useState("");

  function onTextChange(e) {
    setTextInput(e.target.value);
  }
  return (
    <TodoStoreConsumer>

zapkub

// store/index.jsx

const TodoStoreProvider = ({ children }) => {
  const [todos, setTodos] = useState([
    {
      title: "Touch myself."
    },
    {
      title: "Sleep peacefully"
    }

zapkub

// TodoInput.jsx
const TodoInput = () => {
  const [textInput, setTextInput] = React.useState("");

  function onTextChange(e) {
    setTextInput(e.target.value);
  }
  return (
    <input className="new-todo" value={textInput} onChange={onTextChange} />
  );

zapkub

export default () => (
  <TodoStoreProvider>
    <div className="App todoapp">
      <header className="header">
        <h1>todos</h1>

        <TodoInput />
      </header>
      <section className="main">

zapkub

const TodoStoreContext = React.createContext();
const TodoStoreProvider = ({ children }) => {
  const store = {
    todos: [
      {
        title: "Touch myself."
      },
      {
        title: "Sleep peacefully"
      }

zapkub

// TodoInput.jsx
const TodoInput = () => {
  const [textInput, setTextInput] = React.useState("");

  function onTextChange(e) {
    setTextInput(e.target.value);
  }

  return (
    <input className="new-todo" value={textInput} onChange={onTextChange} />

zapkub

import React from "react";
import "./App.css";

import "todomvc-common/base.css";
import "todomvc-app-css/index.css";

// เขียน ทุก component รวมกันในไฟล์เดียว
// เพื่อความสะดวกในการเขียนบทความ
const TodoInput = () => <div />;
const TodoList = () => <div />;

zapkub

const TodosApp = () => {

  // Declare every state we need to store
  const [filter, setFilter] = React.useState<TodoState["filter"]>("All");
  const [todos, setTodo] = React.useState<TodoState["todos"]>([]);
  const [textInput, setTextInput] = React.useState<TodoState["textInput"]("");
                                                              
                                                              
                                                               
  return ( /** implement UI */ )