I am in the process of learning React - I am having an issue where the values when running conditional returns appear to still be visible on screen.
Example: Go to the Room Button, select a room and a user then go to the User Button or Location Button and the values still appear to be visible/selected - although they are not.
I had seen a similar post to this, however could not seem to get it working. I have tried resetForm() setFieldValue
I have created a codesandbox with what I am using below. There may be a better way to do this also...
https://codesandbox.io/s/floral-leftpad-vhfi0
I would appreciate any feedback/hints or tips what or where I am going wrong!
Thanks,
Value for your select should be null if you want to reset it. In your case it could be undefined, because you find the value and if nothing found - it would be undefined here.
value={
props.options
? props.options.find((option) => option.value === field.value)
: null || ""
}
You could code like this to make value as null:
let value = null;
if (props.options) {
value =
props.options.find((option) => option.value === field.value) || null;
}
return (
<div style={{ width: props.width }}>
<Select
{...field}
{...props}
name={field.name}
isSearchable="true"
isClearable="true"
value={value}
onChange={(option) => {
if (option) {
setFieldValue(field.name, option.value);
} else {
setFieldValue(field.name, 0);
}
}}
onBlur={field.onBlur}
/>
</div>
);
Check it out: https://codesandbox.io/s/infallible-fire-68m1m?file=/src/CustomSelect.js