How can I access properties of another function in same component?

I want to put NumberFormat inside OutlinedInput. Also, i want to have different properties format for NumberFormat. (There will be a select window, which defines which of format properties to use.

I have this:

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

import NumberFormat from 'react-number-format';

function NumberFormatCustom(props) {

  const { value, format, ...other} = props;

  return(
    <NumberFormat 
    {...other}
    format={format}
    mask="_"
    />
  )
}


export default function TextMaskPhone(props) {
  const classes = useStyles();
  const { value, name, label, onChange } = props;

  

  const [format, setFormat] = useState("+1 (###) ###-####");

  return (
      <div>
        <Button onClick={doTest}>change</Button>
        <FormControl className={classes.root} variant="outlined">
          <InputLabel htmlFor="component-outlined">{label}</InputLabel>
          <OutlinedInput
            className={classes.inputPhone}
            labelWidth="50"
            value={value}
            name={name}
            onChange={onChange}
            id="formatted-text-mask-input"
            inputComponent={NumberFormatCustom}
          />
        </FormControl>  
      </div>
  );
}

Help please, how can i pass formatvalue from TextMaskPhone function into NumberFormatCustom?

Answer

you must use inputProps:

<OutlinedInput
      labelWidth="50"
      value={value}
      name={name}
      onChange={onChange}
      inputProps={{
        format
      }}
      id="formatted-text-mask-input"
      inputComponent={NumberFormatCustom}
    />

Leave a Reply

Your email address will not be published. Required fields are marked *