question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Doesn't work with redux field

See original GitHub issue

I tried to wrap the NumberFormat in redux-form/field but it doesn’t get the value initialized or set although the inner input contains the correct value.

Here’s the code:

<Field name={this.props.fieldName} component={NumberFormat} customInput={TextField} hintText={this.props.title} thousandSeparator={true} prefix={'$'}/>

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5

github_iconTop GitHub Comments

4reactions
Elliot128commented, Apr 5, 2018

I think redux-form uses the onChange handler to modify form state. You will need to wrap the NumberFormat component to call props.onChange (passed from redux-form) whenNumberFormat.onValueChange occurs.

1reaction
JChiquincommented, Sep 14, 2018

You pass the events object to onChange. Just in case anyone needed more clarification.

export default ({ inputRef, onChange, ...other }) => (
  <NumberFormat
    {...other}
    getInputRef={inputRef}
    onValueChange={(_, e) => onChange(e)}
    suffix="%"
  />
);

Hi man, I tried using this Field component:

function MyNumberFormat(props) {
  const { inputRef, onChange, ...other } = props;
  return (
    <NumberFormat
    {...other}
    getInputRef={inputRef}
    onValueChange={(_, e) => onChange(e)}
    suffix="%"
    />
  );
}

...

<Field
   name="liquidation_fee"
   component={MyNumberFormat} 
   customInput={TextField}
   />

When I write in the input it returns the next error: Uncaught TypeError: onChange is not a function

PD: <Field/> is in a form decorated with redux-form Sorry my english

I think I solved with this: const { inputRef, input: {onChange}, ...other } = props;

Read more comments on GitHub >

github_iconTop Results From Across the Web

Field Validation doesn't work · Issue #3832 - GitHub
I can't seem to get Field validation working, no matter what I try. Nothing seems to work. I am using Material UI Next...
Read more >
Redux-form <Field /> type prop not working for checkbox or ...
I went through the documentation but anything other than type "text" and "email" is not working. For example, I want to use a...
Read more >
Field - Redux Form
getRenderedComponent() #. Returns the instance of the rendered component. For this to work, you must provide a forwardRef prop, and your component must...
Read more >
Installing and Configuring Redux Form - DevCamp
All right welcome back to the course. In this video we are going to build a signin form component that we will put...
Read more >
Final Form Docs – Migration from Redux Form
Step 4: Get form state from <Form/> , not as props · import React from 'react' import { Form, Field } from 'react-final-form'...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found