Reactjs - Material UI - redux form framework - with password toggle - not using hooks

Question

I am working on a react project and have built a form framework which wraps material ui, around the redux form.

** sandbox https://codesandbox.io/s/romantic-pasteur-nmw92

https://material-ui.com/components/text-fields/

I am unsure how to add the states or a variable to get changed to toggle the field -- I tried to add a constructor but it came back with an error.

Here is the current code base - at the moment it will produce a password field - but I can't get toggling processed.

import React from 'react';
import TextField from '@material-ui/core/TextField';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';


import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';

import IconButton from '@material-ui/core/IconButton';


import InputAdornment from '@material-ui/core/InputAdornment';

import TooltipInfoHandler from '../_SharedGlobalComponents/TooltipInfoHandler/TooltipInfoHandler';

const renderPasswordField = ({input, rows, multiline, label, required, type, placeholder, fieldRef, onClick, disabled, helper, charLimit, startAdornment, endAdornment, meta: { touched, error, warning } }) => {

  let showPassword = false;
  
  function handleClickShowPassword(){
    console.log("showpass?")
    showPassword = !showPassword
  }

  /*
  const handleClickShowPassword = () => {
    setValues({ ...values, showPassword: !values.showPassword });
  };

  const handleMouseDownPassword = (event) => {
    event.preventDefault();
  };
  */

  /*
  constructor(props, context) {
    super(props, context);
    this.state = {
      showPassword: false
    };
  }*/

  return (
    <FormControl component="fieldset" fullWidth={true} className={multiline === true? "has-multiline": null}>    
      <TextField
        label={required ? label + " *": label}
        multiline={multiline}
        rows={rows}
        type={showPassword ? 'text' : 'password'}
        //type={'text'}
        error={touched && (error && error.length > 0 ? true : false)}
        helperText={touched &&
          ((error && error.length > 0 ? error : null) || 
          (warning && warning.length > 0 ? warning : null))
        }
        placeholder={placeholder}
        InputLabelProps={placeholder? {shrink: true} : {}}
        inputRef={fieldRef}
        onClick={onClick}
        disabled={disabled}
        InputProps={{
          endAdornment: <IconButton
            aria-label="toggle password visibility"
            onClick={handleClickShowPassword}
            //onMouseDown={handleMouseDownPassword}
          >
            {showPassword ? <Visibility /> : <VisibilityOff />}
          </IconButton>
        }}
        {...input}
      />
      {helper && helper.length > 0 &&
        <TooltipInfoHandler helper={helper} />
      }
      {charLimit && multiline &&
        <FormHelperText 
          error={false}
        > 
          {charLimit - input.value.length} characters remaining
        </FormHelperText>
      }
    </FormControl>
  )
}

export default renderPasswordField;

What @gionic said. We need a working example. We also need to know what version of React you are using (does is support hooks or not)? — Jason Bellomy
– Jason Bellomy, Commented Feb 11, 2021 at 17:54

Muhammad Hassan · Accepted Answer · 2021-02-11 19:03:53Z

0

import React from "react";
import { useState } from 'react';
import TextField from "@material-ui/core/TextField";
import FormControl from "@material-ui/core/FormControl";
import FormHelperText from "@material-ui/core/FormHelperText";

import Visibility from "@material-ui/icons/Visibility";
import VisibilityOff from "@material-ui/icons/VisibilityOff";

import IconButton from "@material-ui/core/IconButton";

import InputAdornment from "@material-ui/core/InputAdornment";

const renderPasswordField = ({
  input,
  rows,
  multiline,
  label,
  required,
  type,
  placeholder,
  fieldRef,
  onClick,
  disabled,
  helper,
  charLimit,
  startAdornment,
  endAdornment,
  meta: { touched, error, warning }
}) => {
  const [showPassword, setShowPassword] = useState(false);
  // let showPassword = false;

  function handleClickShowPassword() {
    console.log("showpass?");
    setShowPassword(!showPassword)
  }

 /*
  const handleClickShowPassword = () => {
    setValues({ ...values, showPassword: !values.showPassword });
  };

  const handleMouseDownPassword = (event) => {
    event.preventDefault();
  };
  */

   

  return (
    <FormControl
      component="fieldset"
      fullWidth={true}
      className={multiline === true ? "has-multiline" : null}
    >
      <TextField
        label={required ? label + " *" : label}
        multiline={multiline}
        rows={rows}
        type={showPassword ? 'text' : 'password'}
        //type={'text'}
        error={touched && (error && error.length > 0 ? true : false)}
    helperText={
      touched &&
      ((error && error.length > 0 ? error : null) ||
        (warning && warning.length > 0 ? warning : null))
    }
    placeholder={placeholder}
    InputLabelProps={placeholder ? { shrink: true } : {}}
    inputRef={fieldRef}
    onClick={onClick}
    disabled={disabled}
    InputProps={{
      endAdornment: (
        <IconButton
          aria-label="toggle password visibility"
          onClick={handleClickShowPassword}
          //onMouseDown={handleMouseDownPassword}
        >
          {showPassword ? <Visibility /> : <VisibilityOff />}
        </IconButton>
      )
    }}
    {...input}
  />
  {charLimit && multiline && (
    <FormHelperText error={false}>
      {charLimit - input.value.length} characters remaining
    </FormHelperText>
  )}
</FormControl>
  );
};

export default renderPasswordField;

edited Feb 11, 2021 at 19:03

answered Feb 11, 2021 at 17:39

Muhammad Hassan

13 bronze badges

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

7 Comments

Jason Bellomy Over a year ago

That's if the version of React he has supports hooks. If he has an older version of React, he would use setState and other things.

Muhammad Hassan Over a year ago

You can use hooks in the current version of your React app

Muhammad Hassan Over a year ago

In codesandbox you are using react version 16.13.1 which support hooks

The Old County Over a year ago

I'm not using hooks in the entire project

Muhammad Hassan Over a year ago

You are using a functional component. In order to get the desired behavior, you have to use state, either with the useState hook or by using a class component with the state.

|

Collectives™ on Stack Overflow

Reactjs - Material UI - redux form framework - with password toggle - not using hooks

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related