Renders a password input field with a reveal button.

  • Use the React.useState() hook to create the shown state variable and set its value to false.
  • Use a<div> to wrap both the<input> and the <button> element that toggles the type of the input field between "text" and "password".


function PasswordRevealer({ value }) {
  const [shown, setShown] = React.useState(false);

  return (
      <input type={shown ? 'text' : 'password'} value={value} onChange={() => {}} />
      <button onClick={() => setShown(!shown)}>Show/Hide</button>


ReactDOM.render(<PasswordRevealer />, document.getElementById('root'));