How to handle null values when using availity-reactstrap-validation

Question

Using availity-reactstrap-validation, when form fields (AvField) is populated with null data from backend I get an warning saying:

Warning: value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components.

I try to exchange null values with empty strings, like the warning says, but to no avail.

<AvField type="text" name="offerKey" value={ data.offerKey === null ? '' : data.offerKey } />

If a add a blank space as value the warning disappears but then the placeholder text won't appear in the text box.

Is this a bug or a feature?

Answer 1

You can set your value in the state with null or empty string ('')

state = {
value: ''
}

or you can change your logic for:

value={ data && data.offerKey ? data.offerKey : '' }