import React , { useState , useEffect } from "react" ; import { useStore , useActions } from "../store" ; export default function Todos ( ) { const items = useStore ( state => state . todos . items ) ; const add = useActions ( actions => actions . todos . add ) ; const [ newTodo , setNewTodo ] = useState ( "" ) ; useEffect ( ( ) => setNewTodo ( "" ) , [ items ] ) ; return ( < div > < h2 > Todo List < /h2> < ul > { items . map ( ( todo , idx ) => ( < li key = { idx } > { todo } < /li>))} < /ul> < input type = "text" onChange = { e => setNewTodo ( e . target . value ) } value = { newTodo } / > < button onClick = { ( ) => add ( newTodo ) } > Add < /button> < /div>); }