import React from 'react' ; import { createState , useState , State } from '@hookstate/core' ; interface Task { name : string ; priority : number | undefined ; } const initialValue = [ { name : 'First Task' , priority : undefined } ] ; const globalState = createState ( initialValue ) ; setTimeout ( ( ) => globalState . merge ( [ { name : 'Second task by timeout' , priority : 1 } ] ) , 5000 ) ; export const ExampleComponent = ( ) => { const state = useState ( globalState ) ; return < > < JsonDump state = { state } /> { state . map ( ( taskState , taskIndex ) => < TaskEditor key = { taskIndex } taskState = { taskState } / > ) } < p > < button onClick = { ( ) => state . merge ( [ { name : 'Untitled' , priority : undefined } ] ) } > Add task < /button></p > < />; } ; function TaskEditor ( props ) { const taskState = useState ( props . taskState ) ; return < p > Last render at : { ( new Date ( ) ) . toISOString ( ) } < br /> Task state : { JSON . stringify ( taskState . get ( ) ) } < br /> < input value = { taskState . name . get ( ) } onChange = { e => taskState . name . set ( e . target . value ) } / > < button onClick = { ( ) => taskState . priority . set ( p => ( p || 0 ) + 1 ) } > Increase priority < /button> < /p>; } function JsonDump ( props ) { const state = useState ( props . state ) ; return < p > Last render at : { ( new Date ( ) ) . toISOString ( ) } < br /> Current state : { JSON . stringify ( state . value ) } < /p>; }