React — inline onfocus placeholder = ''

Question

I typically use an inline onfocus / blur to toggle placeholder text in inputs. Like this:

<input type="text" placeholder="Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name'"/>

This doesn't seem to work in React and I'm wondering what is the "correct" way of handling placeholder toggles in React.

Answer 1

You still can do it inline with React:

<input 
  type="text" 
  placeholder="Name" 
  onFocus={(e) => e.target.placeholder = ""} 
  onBlur={(e) => e.target.placeholder = "Name"} />