How to set placeholder in input type date [React]

import React , { useRef } from "react";

const App= () => {
  const ref = useRef();
  return (
    <div>
      <input
        type="date"
        ref={ref}
        onChange={(e) => console.log(e.target.value)}
        onFocus={() => (ref.current.type = "date")}
        onBlur={() => (ref.current.type = "date")}
      />
    </div>
  );
}
export default  App

useRef is not recommended here as it doesn't helps in re-rendering the component and hence it will not change the type of input. The better approach is to initialize it as type "text" and change the types based on the events on onFocus and onBlur. For your use case, please go through the code below.

export default function App() {
  return (
    <div>
      <input
        type="text"
        onChange={(e) => console.log(e.target.value)}
        onFocus={(e) => (e.target.type = "date")}
        onBlur={(e) => (e.target.type = "text")}
      />
    </div>
  );
}

The error is because onFocus and onBlur are event emitters that expect to fire a callback. In your code, onFocus and onBlur is a statement instead of a callback and thus the error.

You can use react RefObject to do it easily. Reference:

• https://reactjs.org/docs/refs-and-the-dom.html
• https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
• https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event

import { useRef } from "react";

export default function App() {
  const ref = useRef();
  return (
    <div>
      <input
        type="text"
        ref={ref}
        onChange={(e) => console.log(e.target.value)}
        onFocus={() => (ref.current.type = "date")}
        onBlur={() => (ref.current.type = "text")}
      />
    </div>
  );
}