CODEWITHSUNDEEP
react-hooks
Kimaya
Kimaya

Reputation: 1420

React Hooks: defaultValue for textField is null and gives error-Warning: `value` prop on `input` should not be null

I have an email textField that defaults to null when no value. The Redux state where it fetched data from is null(which is ok) but when that value is null I want the field to have '' so that the below warning is not thrown

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

I have a function where, value is read

const [emailValue, setEmail] = useInput(email)

Hook where value is set

const useInput = (defaultValue = '') => {
  const [value, setValue] = useState(defaultValue)

  const handleChange = useCallback(target => {
    setValue(target.value)
  }, [])

  return [value, handleChange]
}

export default useInput

I assumed when default value is set to '' in const useInput = (defaultValue = '') it would make the value to '' when redux state gives null, but the value is still null and does not become '' What am I doing wrong here?

Upvotes: 0

Views: 2900

Answers (1)

Gilad Tamam
Gilad Tamam

Reputation: 306

if you would like that the default value will be '' then you should replace null with undefined because null it's a value therefor it's not the empty string you expected to be.

Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed

Upvotes: 1

Related Questions