how react programmatically focus input

Question

I\'m trying to implement a very simple use case, a UI feature, where:

1. There is a label with some content in it
2. If clicked, a text input replaces it wi

Answer 1

useFocus hook

// General Focus Hook
const useFocus = (initialFocus = false, id = "") => {
    const [focus, setFocus] = useState(initialFocus)
    const setFocusWithTrueDefault = (param) => setFocus(isBoolean(param)? param : true)
    return ([
        setFocusWithTrueDefault, {
            autoFocus: focus,
            key: `${id}${focus}`,
            onFocus: () => setFocus(true),
            onBlur: () => setFocus(false),
        },
    ])
}


const FocusDemo = () => {

    const [labelStr, setLabelStr] = useState("Your initial Value")
    const [setFocus, focusProps] = useFocus(true)

    return (
        <> {/* React.Fragment */}
             setLabelStr(e.target.value)}
                value={labelStr}
                {...focusProps}
            />
            
{labelStr}
        
    )

}

For a more complete demo [click here][1].