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>
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>