I would love some help or some directions with refactoring this block of code. It perfectly works but it kind of looks ugly ;). It was messier but I tried to make it DRY-er.
const uploadedFiles = images.map((item, index) => {
if (images.length < 2) {
if (item.file.name.match(/.(gif)$/i)) {
return (
<ImageGif
key= {index}
src= {item.blobUrl}
onClose={this.props.removeImage}
/>
);
}
return (<ImageContainer
src={item.blobUrl}
key={index}
id={index}
onClose={this.props.removeImage}
/>);
}
if (images.length >= 2) {
if (MAX_SIZE === index + 1) {
return (<ImageContainer
src={item.blobUrl}
key={index}
id={index}
onClose={this.props.removeImage}
hiddenImages={hiddenImages}
/>);
}
if (MAX_SIZE !== index + 1) {
return (<ImageContainer
src={item.blobUrl}
key={index}
id={index}
onClose={this.props.removeImage}
/>);
}
}
return null;
});
Thank you and have a nice day!