how do i get placeholder when i click on text box

Question

I have a class Input.js

import React from 'react'

export const Form = props => {
const { input, label, type, meta, maxLength, pattern, autoCorrect, 
spellCheck, autoFocus, sublabel, placeholder} = props
const { touched, error } = meta
const { name, value } = input

return (
 <label>
  <input {...input}
    type={type}
    id={name}
    maxLength={maxLength}
    pattern={pattern}
    className={className}
    autoCorrect={autoCorrect}
    spellCheck={spellCheck}
    onBlur={value => input.onBlur(value.target.value.trim())}
    autoFocus={autoFocus}
    placeholder={placeholder}

  />
 </label>
)
}

I have added the field

       <Field name='dob' label='Birth date'
         component={Form} type='text'
         onChange={this.clearErrors}
         placeholder="MM/DD/YY"
        />

I see the text box to be

https://i.sstatic.net/4lxpU.png

https://i.sstatic.net/eMNJ3.png

As you can see

https://i.sstatic.net/4lxpU.png

Both the placeholder and the label are at once place which messed it up. I just wanted to have the label there instead of placeholder and when I click on the text both I want to see as

https://i.sstatic.net/eMNJ3.png

Answer 1

onFocus={(e) => { e.target.placeholder = placeholder }} // this would place text when you click on the input field

     import React from 'react'

     export const Form = props => {
     const { input, label, type, meta, maxLength, pattern, autoCorrect, 
     spellCheck, autoFocus, sublabel, placeholder} = props
     const { touched, error } = meta
     const { name, value } = input


    return (
       <label>
       <input {...input}
       type={type}
       id={name}
       maxLength={maxLength}
       pattern={pattern}
       className={className}
       autoCorrect={autoCorrect}
       spellCheck={spellCheck}
       onBlur={value => input.onBlur(value.target.value.trim())}
       autoFocus={autoFocus}
       onFocus={(e) => { e.target.placeholder = placeholder }}
      />
     </label>
      )