React – 3 same inputs but only one change it state

May 6, 2022

I have a custom file input component, which I created to show the preloaded image when the person uploads their file.

But the problem is, I’m using this component three times, and independent of which input I choose to upload, only the first input is affected and re-renders.
Anyone faced this? Should I use custom names for the variables of useState()?

The custom input:

const ImageInput = ({ name, register, registerName }: ImageInputProps) => {
    const [hasFileUploaded, setHasFileUploaded] = useState(false);
    const [currentFile, setCurrentFile] = useState(null);

    const handleImageChange = (e : React.FormEvent<HTMLInputElement>) => {
        setHasFileUploaded(true);
    }

    return (
        <div className="input_box">
            <input type="file" id="file" className="ImageInput" {...register(registerName)} onChange={(e) => handleImageChange(e)} />
            <label htmlFor="file" >
                { hasFileUploaded ? (
                    <>
                        <FontAwesomeIcon icon={faFighterJet} />
                        <p className="input_file_p">{name}</p>
                    </>
                ) : (
                    <>
                        <FontAwesomeIcon icon={faCamera} />
                        <p className="input_file_p">{name}</p>
                    </>
                ) }
                
            </label>
        </div>
    )
};

How I’m using it:

<div className="fc_center_images">
    <div>
        <ImageInput name="Frente CREA" register={register} registerName="cadastro-frente-crea" />
    </div>
    <div>
        <ImageInput name="Verso CREA" register={register} registerName="cadastro-verso-crea" />
    </div>
    <div>
        <ImageInput name="Selfie c/identidade" register={register} registerName="cadastro-selfie" />
    </div>
</div>

>Solution :

each element should have a unique id so I suggest to pass the id as well

const ImageInput = ({ name, register, registerName, id }: ImageInputProps) => {
    const [hasFileUploaded, setHasFileUploaded] = useState(false);
    const [currentFile, setCurrentFile] = useState(null);

    const handleImageChange = (e : React.FormEvent<HTMLInputElement>) => {
        setHasFileUploaded(true);
    }

    return (
        <div className="input_box">
            <input type="file" id={id} className="ImageInput" {...register(registerName)} onChange={(e) => handleImageChange(e)} />
            <label htmlFor={id} >
                { hasFileUploaded ? (
                    <>
                        <FontAwesomeIcon icon={faFighterJet} />
                        <p className="input_file_p">{name}</p>
                    </>
                ) : (
                    <>
                        <FontAwesomeIcon icon={faCamera} />
                        <p className="input_file_p">{name}</p>
                    </>
                ) }
                
            </label>
        </div>
    )
};

you can call it like this :

<div className="fc_center_images">
    <div>
       <ImageInput name="Frente CREA" register={register} registerName="cadastro-frente-crea" id="id1"/>
    </div>
    <div>
       <ImageInput name="Verso CREA" register={register} registerName="cadastro-verso-crea" id="id2" />
     </div>
    <div>
       <ImageInput name="Selfie c/identidade" register={register} registerName="cadastro-selfie" id="id3"/>
    </div>
</div>