Datepicker component breaking the screen in editing

Question

I created the following component to select dates in Unform:

export default function DatePickerInput({ name, ...rest }) {
  const datepickerRef = useRef(null);
  const { fieldName, defaultValue = '', registerField } = useField(name);

  const [date, setDate] = useState(defaultValue || null);
  useEffect(() => {
    registerField({
      name: fieldName,
      ref: datepickerRef.current,
      path: 'props.selected',
    });
  }, [fieldName, registerField]);

  return (
    <Label htmlFor={fieldName}>
      <UnInput>
        <ReactDatePicker
          ref={datepickerRef}
          selected={date}
          onChange={setDate}
          dateFormat="dd/MM/yyyy"
          placeholderText="dd/mm/aaaa"
          writable="true"
          {...rest}
        />
      </UnInput>
    </Label>
  );
}

To save records the component is working normally, loading and saving the date I selected. When I edit a record, when trying to load the date in the initial load, the page is broken and the following error is displayed:

Unhandled Rejection (TypeError): Cannot assign to read only property 'selected' of object '#<Object>'

If I comment on the line path: 'props.selected', in the useEfect() the screen is not broken, but the date is not filled in the component. How to make it work ?

Answer 1

Problem :

formRef.current.setFieldValue('birthday',value) this will attempt to define value in the given path, in our case, provided that path be it props.selected

And props.selected is a read-only property, so you cannot set value in props, hence the error.

useEffect(() => {
    registerField({
      name: fieldName,
      ref: datepickerRef.current,
      path: 'props.selected', // <---- this is props, and it's readonly
      clearValue: (ref) => {
        ref.clear();
      },
    });
}, [fieldName, registerField]);

---

Solution :

You can remove the path and use the methodsgetter and setter, appointed asgetValue and setValue:

setValue : to define the starting value or past setFieldValue

getValue : to get value when sending

useEffect(() => {
    registerField({
      name: fieldName,
      ref: datepickerRef.current,
      clearValue: ref => {
        ref.clear();
      },
      setValue: (e, v) => {
        setDate(new Date(v)); // <---- Setting up default value 
      },
      getValue: () => {
        return datepickerRef.current.props.selected; // to get selected value from Date picker's props
        // OR
        return Date.toString(); // to get selected value from state it self
      }
    });
}, [fieldName, registerField]);

WORKING DEMO :

Answer 2

writable="true"

In JSX, to insert a boolean value, among others, you must insert it between ex keys. writable={true},