import React , { useCallback , useRef } from "react" ; import useTodos from "./useTodos" ; import "./App.css" ; const Heading = ( { title } ) => < h2 > { title } < /h2>; const Box = ( { children } ) => ( < div style = { { padding : "1rem" , fontWeight : "bold" , } } > { children } < /div>); const Button = ( { title , children , style , ... rest } ) => ( < button { ... rest } style = { { ... style , backgroundColor : "red" , color : "white" , fontSize : "xx-large" , } } > { title ?? children } < /button>); function UL < T > ( { items , render , itemClick , } ) { return ( < ul > { items . map ( ( item , index ) => ( < li onClick = { ( ) => itemClick ( item ) } key = { index } > { render ( item ) } < /li>))} < /ul>); } function App ( ) { const { todos , addTodo , removeTodo } = useTodos ( ( state ) => state ) ; const newTodoRef = useRef < HTMLInputElement > ( null ) ; const onAddTodo = useCallback ( ( ) => { if ( newTodoRef . current ) { addTodo ( newTodoRef . current . value ) ; newTodoRef . current . value = "" ; } } , [ addTodo ] ) ; return ( < div > < Heading title = "Introduction" / > < Box > Hello there < /Box> < Heading title = "Todos" / > < UL items = { todos } itemClick = { ( item ) => alert ( item . id ) } render = { ( todo ) => ( < > { todo . text } < button onClick = { ( ) => removeTodo ( todo . id ) } > Remove < /button> < />)}/ > < div > < input type = "text" ref = { newTodoRef } / > < Button onClick = { onAddTodo } > Add Todo < /Button> < /div> < /div>); } const JustTheTodos = ( ) => { const todos = useTodos ( ( state ) => state . todos ) ; return ( < UL items = { todos } itemClick = { ( ) => { } } render = { ( todo ) => < > { todo . text } < />}/ > ) ; } ; const AppWrapper = ( ) => ( < div style = { { display : "grid" , gridTemplateColumns : "50% 50%" , } } > < App /> < JustTheTodos / > < /div>); export default AppWrapper ;