PuckUser Component

pickuser2.jsx

function useLink( init ){
   const [ value, set ] = useState( init );
   // It can be a class with useful methods, like this one: 
   // https://github.com/VoliJS/NestedLink/blob/master/valuelink/src/link.ts
   // But we just use the plain object here to illustrate an idea.
   return { value, set }; 
}

const PickUser = ({ $selected /* link to some upper component state */ }) => {
    // Declare the local component's state as a link.
    // Now, state elements are easy to distinguish and pass around.
    const $editing = useLink( false );

    return (
      <div>
         { $editing.value ?
             <EditUser $selected={$selected /* just pass it through */}
                       close={() => $editing.set( false )}/>
         :
             <input value={ userToString( $selected.value ) }
                    onClick={ () => $editing.set( true ) }/>
         }
      </div>
    )
}