Is there a way to change the type of an input in React?

Question

So I've tried the following, I can't seem to change the type of an input. So the same input can either be of type text or password but I can't switch between both. This is a Semantic UI Input. (from semantic-ui-react)

   const [inputType, setInputType] = useState('password'||'text')

in my JSX:

   <Input type={inputType} value={inputValue} onChange={handleInput} className="landingInput" placeholder={inputPlaceholder} />

at initialization:

  setInputType('text');

after an event:

  setInputType('password'); // should update html template with type="password" but it doesn't

useEffect is used to make sure state is updated, every other hook works as expected. Could this be a security precaution? Can you think of a way to avoid creating a new input?

Thank you

should update html template with type="password" ... Which template? It seems like much relevant code is missing from this question. — spender
– spender, Commented Feb 25, 2020 at 11:13
I mean the generated html template, I've updated the question with the relevant JSX — van
– van, Commented Feb 25, 2020 at 11:14

Akhil Aravind · Accepted Answer · 2020-02-25 11:26:27Z

2

Toggling input type is easy, Here I used a button to toggle the input type to text and password. check the working demo Here.

Check the updated code block

const App=()=>{
  const [inputType, setInputType] = useState('text');
  const inputPlaceholder = 'Add Here';
  const handleInput =()=>{}

  const toggleInput = ()=>{
setInputType(inputType === 'password' ? 'text': 'password')
  }
    return (
      <div>
        <input type={inputType} value="password" onChange={handleInput} className="landingInput" placeholder={inputPlaceholder} />
        <button onClick={toggleInput} >Toggle type</button>
      </div>
    );
}

answered Feb 25, 2020 at 11:26

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

van Over a year ago

setInputType(inputType === 'password' ? 'text': 'password') did the trick. thank you very much

Akhil Aravind Over a year ago

@van do you need the semantic UI fiddle ??. I can do that also

Collectives™ on Stack Overflow

Is there a way to change the type of an input in React?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related