Clear HTML Input Using Typescript

Issue

I have a React component, i need clear this input file but still problem in typescript

The left-hand side of an assignment expression may not be an optional property access.

import { IonButton, IonItem, IonLabel, useIonLoading } from '@ionic/react';
import axios from 'axios';
import React, { FormEvent, useRef, useState } from 'react';
import { errorMessage, successMessage } from '../../services/alertService';


interface ModalAddWorksheetState {
    isOpen: boolean;
    dismiss: () => void;
    CheckerId: string;
    regNo: string;
}

const ModalAddWorksheet: React.FC<ModalAddWorksheetState> = ({ isOpen, dismiss, CheckerId, regNo }) => {

const [presentLoading, dismissLoading] = useIonLoading();

const [inspectionPicture, setInspectionPicture] = useState<Blob>();
const inspectionPictureRef = useRef<HTMLInputElement>(null);

const handleImageChange = (e: FormEvent<HTMLInputElement>) => {
    setInspectionPicture(e.currentTarget.files![0]);
}

const handleAddWorksheetDetailTemp = async () => {
    try {

        presentLoading({
            message: 'Loading...'
        });

        const formData = {}
        const response = await axios.post(`${process.env.REACT_APP_HOST}/api`, formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        });

        if (response.status === 200) {
            await successMessage('Success Add Inspection Item');
            dismissLoading();
            inspectionPictureRef.current?.value = "";
        }
    } catch (err) {
        await errorMessage(err);
        dismissLoading();
    }
}

const handleSubmitWorksheetDetail = async (e: React.FormEvent) => {
    try {
        e.preventDefault();
        await handleAddWorksheetDetailTemp();
    } catch (err) {
        errorMessage(err);
    }
}

return (
    <form onSubmit={handleSubmitWorksheetDetail} encType='multipart/form-data'>
        <IonItem>
            <IonLabel position='stacked'>Inspection Picture</IonLabel>
            <input type={'file'} ref={inspectionPictureRef} onChange={handleImageChange} className="w-full p-2 mt-3 rounded-sm ring-1 ring-slate-300" accept='.png,.jpg,.jpeg' />
        </IonItem>
        <IonButton type='submit' expand='block'>Submit</IonButton>
    </form>
)
}

  export default ModalAddWorksheet;

But this code

inspectionPictureRef.current?.value = "";

return error "The left-hand side of an assignment expression may not be an optional property access.ts(2779)"

Solution

The problem is here:

inspectionPictureRef.current?.value = "";

As per the MDN docs, it is invalid to try to assign to the result of an optional chaining expression.

In other words, you should not use ? on the left side while assigning a value.

Try the following instead, without the ? on the left side:

inspectionPictureRef.current.value = ""

Explanation:

const object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment

Answered By - Mukesh Maurya