value cant be changed on input as it is now [11:43pm]

[frankcollins3]

last time I encountered this issue I was updating the value with the onChange handler which I think I want to go their advised onDefault way

[kaleemullah786]

Need add onChange event handler to the input

[frankcollins3]

retrieving the value with this code right here:

proposed approach: JQ to .attr() remove attribute. as far as I know: dont use jquery with react state because react needs to know it's state.

I believe messing up with an elements object properties are just as much the concept of (react as it understand itself) in the same way as state.

but not sure just logging attempted solutions and suggestions

[12:58pm]

[frankcollins3]

<form>
                            <input onFocus={deleteValue} onChange={usernameinputhandler} id="username" type="text" value="username"></input>
                            <input onChange={emailinputhandler} id="email" type="text" value="email"></input>
                            <input onChange={passwordinputhandler} id="password" type="text" value="password"></input>
                            <input onChange={ageinputhandler} id="age" type="text" value="age"></input>
                        </form>

[kaleemullah786] hello good sir thank you and followed you for stopping by. yes adding onChange property 👍 ty I want to fix the problem by: 1) having no inline "value" set for any input 2: having mousebehavior initialize the setting of: "username" "password" // so there would be visual display of the same "value" that they have now but without the stickiness of inline react setting

maybe can change the inputs then

[frankcollins3]

https://github.com/frankcollins3/fill_container/assets/73137934/7ea7543a-4048-4597-a286-23abe8d43530

    const ghosttext = (event:any) => {
        let targetId:any = event.target.id
        console.log('targetId')
        console.log(targetId)
        if (targetId === 'username') {
            $(event.target).attr('value', 'username')
        }
        if (targetId === 'email') {
            $(event.target).attr('value', 'email')
        }
        if (targetId === 'password') {
            $(event.target).attr('value', 'password')
        }
        if (targetId === 'age') {
            $(event.target).attr('value', 'age')
        }
    }

const ghosttext = (event:any) => {
        let targetId:any = event.target.id
        $(event.target).attr('value', targetId)

this is the way I solved it in mine nugget. not having any inline props and changing them via jquery and mousebehavior [1:52pm]

still kind of curious how to fix this with a more react approach and I think the usage of simple string values permits the use of this exception where jquery doesn't get in the way too much

[frankcollins3]

I believe the right thing to do is to toggle value={} with state and ternary value declaration [2:13pm]