React: empty useState string-CodePudding

I've managed to get through most of this page; I'm feeling accomplished, about to record a .gif of my progress and I've noticed that the <input /> tag isn't clear of it's value after succession via onClick. I need newEmail to be empty upon completion, more as the input field with it's valued to appear clear.

I've been wasting serious time trying to do what should be the easiest task imaginable. Any help? Also, any pro tips regarding anything else would be appreciated.

function EmailSettings() {
    const [newEmail, setNewEmail] = useState("")

    const [addEmail, {
        data: addData,
        error: addErr
    }] = useMutation(ADD_EMAIL)

    useEffect(() => {
        if (addData && addData.addEmail) {
            if (addData.addEmail === true) {
                refetch()

                setNewEmail("")
                console.log(newEmail)

            } else {
                console.log(addErr)
            }
        }
    }, [addData])

    const onAddEmail = email => {
        addEmail({ variables: { input: { email: email } } })
    }
    return (

            <div className={styles.addEmail}>
                <div className={styles.desc}>Add email address</div>
                <input
                    type='email'
                    placeholder='Email address'
                    autoComplete="off"
                    className={styles.addInput}
                    onChange={e => setNewEmail(e.target.value)}
                />
                <button
                    className={styles.addBtn}
                    onClick={() => onAddEmail(newEmail)}
                >
                    Add
                </button>
            </div>

    )
}

CodePudding user response：

I guess you are using react-apollo. Can't you just call the onCompleted callback?

const [addEmail, {
        data: addData,
        error: addErr
    }] = useMutation(ADD_EMAIL, {
   onCompleted: () => setNewEmail('')
})

Edit:

Add the state value to the input.

<input value={newEmail} ... />

CodePudding user response：

You can set the input value to the state

<input
  type='email'
  placeholder='Email address'
  autoComplete="off"
  className={styles.addInput}
  onChange={e => setNewEmail(e.target.value)}
  value={newEmail}
/>

Then set the state value to an empty string upon completion as suggested by @Akiba

const [addEmail, {
        data: addData,
        error: addErr
    }] = useMutation(ADD_EMAIL, {
   onCompleted: () => setNewEmail('')
})