react input value edit

Question

Witam,

mam taki problem, który niestety mnie przerósł. Mam form w którym dodaję na przykład tytuł taska i to działa, ale pokusiłem się o możliwość jego edycji i to mnie przerosło, mam taki kod

 <input onChange={handleChange} onMouseDown={mouseEnter} onMouseLeave={mouseLeave}
                    value={filterToEdit.length < 1 ? (null) : (console.log(newTask.title), newTask.title)}
                    id='newTask' type="text" />

który powoduje, że w trybie edycji wyświetla mi się w value aktualny stan i tym samum w polu input

 const mouseEnter = (e) => {
        e.target.value = null
    }
    const mouseLeave = (e) => {
        if (e.target.id === 'newTask') {
            setNewTask({ newTask, title: e.target.value })
        }
    }

ten kod miał usuwać poprzez mouseEnter to co się wyświetliło

a mouseLeave miał ustawiać nowy stan na nową wartość e.target.value, ale to nie działa bo przcież e.target.value jest ustawione na null

Jak to rozwiązać? proszę o radę, może w ogóle źle podchodzę do problemu....?

Comments

Nie do końca umiem sobie wyobrazić to co robisz. A co się stanie jeśli zamiast nulla wstawisz ''?

---

Jezeli zamiast null ustawię "" jest tak samo,

Musze w polu input wyświetlić stan który użytkownik ustawił wcześniej, robię to poprzez value, a następnie doprowadzić do tego aby to value było edytowalne - żeby na miejsce ustawionego wcześniej stanu-tytułu taska wprowadzić nowy

---

wystawisz mi to na jakimś repo?

---

dzięki, 

ale rozwiązałem problem ma to być tak

 const mouseEnter = (e) => {
        setNewTask({ newTask, title: null })

    }
    const mouseLeave = (e) => {

        setNewTask({ newTask, title: e.target.value })
    }

ale przy okazji padło mi dodawanie nowego elementu, więc dojrzałem do tego aby dodawanie nowego taska było w jednym komponencie a edytowanie w drugim....