import React, { useState } from "react"; import { render } from "react-dom"; function useUncontrollizable( val?: T, set_val?: (newVal: T) => void, default_val?: T ): [T, (newVal: T) => void] { const isControlled = typeof val !== "undefined" && typeof set_val !== "undefined"; const control = useState(default_val); return isControlled ? [val, set_val] : control; } function DoublyOptionallyControllable({ myValue, onMyValueChange, defaultMyValue, someNum, onSomeNumChange, defaultSomeNum }: { // first controlled value myValue?: string; onMyValueChange?: (newValue: string) => void; defaultMyValue?: string; // second controlled value someNum?: number; onSomeNumChange?: (newNum: number) => void; defaultSomeNum?: number; }) { const [str, set_str] = useUncontrollizable( myValue, onMyValueChange, defaultMyValue ); const [num, set_num] = useUncontrollizable( someNum, onSomeNumChange, defaultSomeNum ); return ( set_str(e.target.value)} />{" "} ); } function App() { const [str, set_str] = useState("a"); const [num, set_num] = useState(1); return (

{" "} ={" "} {str} {num} (both values controlled)

{" "} ={" "} {str} (only the string controlled)

{" "} ={" "} {num} (only the number controlled)

(fully uncontrolled)

); } const rootElement = document.getElementById("root"); render(, rootElement);