React Bootstrap hide/show eye icon

Question

I have password field like this. I want to put an eye icon at the end of the password field to show/hide password.

  <Form.Control
                    size="lg"
                    type="password"
                    placeholder="Password"
                    style={loginStyle.regualrText}
                    className="mt-3"
                    onChange={e => {
                        const val = e.target.value;
                        setLoginData(prevState => {
                            return { ...prevState, password: val }
                        });
                    }}
                />

I couldn't find this in React bootstrap. In the following way, the problem can be solved by adding a button to the end.

      <InputGroup className='mt-3'>
                    <FormControl
                        id={'Password'}
                        size="lg"
                        type={passwordState.type}
                        placeholder="Password"
                        style={loginStyle.regualrText}
                        className="pass-wrapper"
                        onChange={e => {
                            const val = e.target.value;
                            setLoginData(setState => {
                                return {...setState, password: val}
                            });
                        }}
                    />
                    <InputGroup.Append>
                        <button class="btn btn-outline-danger" type="button"
                                onClick={() => setPasswordState(setState => {
                                    return {
                                        ...setState,
                                        type: 'password' ? 'text' : 'password',
                                        name: 'Show' ? 'Hide' : 'Show'
                                    }
                                })}>{passwordState.name}
                        </button>
                    </InputGroup.Append>
                </InputGroup>

Is there any way I can fix it by adding an eye icon?

Answer 1

You can add InputGroup.Text under InputGroup.Append

<InputGroup.Append>
    <InputGroup.Text>
        <i onClick={clickHandler} class={showPass ? 'fas fa-eye-slash' : 'fas fa-eye'}></i>
    </InputGroup.Text>
</InputGroup.Append>

You have to add cdn link of font-awesome in head block of html.