CODEWITHSUNDEEP
javascriptreactjsinputreact-hooksnext.js
Daryl Wong
Daryl Wong

Reputation: 2443

NextJS: Reverting the placeholder text in input field

I have this simple form where I would like to change the placeholder text back.

  <form>
    <div className='flex'>
      <input
        className='pl-1 appearance-none block bg-gray-200 text-gray-700 border border-gray-200 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 w-3/4 md:w-1/2 py-3'
        value={input}
        placeholder={placeholder}
        onInput={(e) => setInput(e.target.value)}
      />
      <button
        className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-12 rounded md:ml-3 mt-3 md:mt-0'
        onClick={handleSubmit}
      >
        Submit
      </button>
    </div>
  </form>

In the handle submit, I have it like this:

    const [placeholder, setPlaceholder] = useState(
'https://www.youtube.com/watch?v=VooQbNHP44M')

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(input)
    setPlaceholder('https://www.youtube.com/watch?v=VooQbNHP44M')
  }

Somehow, after submission, the placeholder text is not reverted back. Do I miss anything?

Upvotes: 2

Views: 3012

Answers (1)

Danila
Danila

Reputation: 18516

Why would you want to change placeholder at all?

I guess you just want to clear input value after submit?

const handleSubmit = (e) => {
    e.preventDefault()
    // Just clear input value and placeholder will be visible again (you might also need to blur currently focused input)
    setInput('')
}

And then you don't need dynamic placeholder at all:

  <form>
    <div className='flex'>
      <input
        className='pl-1 appearance-none block bg-gray-200 text-gray-700 border border-gray-200 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 w-3/4 md:w-1/2 py-3'
        value={input}
        placeholder="https://www.youtube.com/watch?v=VooQbNHP44M"
        onInput={(e) => setInput(e.target.value)}
      />
      <button
        className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-12 rounded md:ml-3 mt-3 md:mt-0'
        onClick={handleSubmit}
      >
        Submit
      </button>
    </div>
  </form>

Upvotes: 1

Related Questions