Pass another parameter to NumberFormatCustom(props) React

Solution 1:

You can define a function, which receives a bunch of parameters and returns a component, then you can pass any arguments to the function, like this:

const createNumberFormatCustom = (...params)=> (props) => {
 // params will be available in the body of your component
 const { inputRef, onChange, ...other } = props;
 
 return (
   <NumberFormat
      ...
   />
 );}

and use it like this:

<TextField InputProps={{ inputComponent: createNumberFormatCustom('another parameter'),
                      className: classes.finput }}

to solve the losing focus problem which you mentioned in the comment, there are some solutions:

1- if you want to pass some additional params just one time you can call createNumberFormatCustom outside of your component and pass the returned component as inputComponent, like this:

const MyComp = createNumberFormatCustom('custom params'); // don't call it inside the body of component, because whenever component rerenders, it makes a new component
<TextField
  ...
InputProps={{
    inputComponent: MyComp,
 }}
/>

You can learn more about this trick Here: Higher-Order Components

2- if you want to read some values inside the component and pass it to createNumberFormatCustom but again for the just first render you can use React.useMemo or React.useRef, like this:

const MyComp = React.useMemo(()=> createNumberFormatCustom('customparams'), []);
<TextField
    ...
    InputProps={{
     inputComponent: MyComp,
    }}
 />

or:

const MyComp = React.useRef(createNumberFormatCustom('custom params'))
<TextField
  InputProps={{
    inputComponent: MyComp.current,
  }}
/>

3- if you want to dynamically send some parameters to NumberFormatCustom,the better solution is to use materialUI approach to send attributes to inputComponent, like this:

<TextField
  InputProps={{
   inputComponent: NumberFormatCustom,
   inputProps: { param1: 'value1', param2:'value2' }
  }}
/>    

and inside NumberFormatCustom read custom params like this:

function NumberFormatCustom(props) {
  const { param1, param2, ...other } = props;
  console.log({param1, param2})

  return (
   <NumberFormat .../>
 );
}