This happens because of the use of the boolean and operator (&&) which is used to determine whether to display the TextFieldClearButton. This operator will always return either side of the evaluation which in most cases won't matter since React will not render false, undefined, null or "" but unfortunately it will show 0.
This can be replaced by either Boolean(value) && <TextFieldClearButton /> or value ? <TextFieldClearButton /> : null
This is probably never going to happen since input fields return their values as strings but its kind of a strange thing to see in your application when it does... 😕
Example code:
Will display like this:
This happens because of the use of the boolean and operator (
&&
) which is used to determine whether to display the TextFieldClearButton. This operator will always return either side of the evaluation which in most cases won't matter since React will not renderfalse
,undefined
,null
or""
but unfortunately it will show0
.This can be replaced by either
Boolean(value) && <TextFieldClearButton />
orvalue ? <TextFieldClearButton /> : null