Refactor multiple condition statements in map function 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) =&gt; {
  if (images.length &lt; 2) {
    if (item.file.name.match(/.(gif)$/i)) {
      return (
        &lt;ImageGif
          key= {index}
          src= {item.blobUrl}
          onClose={this.props.removeImage}
        /&gt;
      );
    }

    return (&lt;ImageContainer
      src={item.blobUrl}
      key={index}
      id={index}
      onClose={this.props.removeImage}
    /&gt;);
  }

  if (images.length &gt;= 2) {
    if (MAX_SIZE === index + 1) {
      return (&lt;ImageContainer
          src={item.blobUrl}
          key={index}
          id={index}
          onClose={this.props.removeImage}
          hiddenImages={hiddenImages}
        /&gt;);
    }
    if (MAX_SIZE !== index + 1) {
      return (&lt;ImageContainer
          src={item.blobUrl}
          key={index}
          id={index}
          onClose={this.props.removeImage}
        /&gt;);
    }
  }

  return null;
});


Thank you and have a nice day!
Use ES2017 object spread:

const uploadedFiles = images.map((item, index) =&gt; {
  const props = {
    key: index,
    src: item.blobUrl,
    onClose: this.props.removeImage,
  };

  const isSingleGif = images.length === 1 &amp;&amp; /\.gif$/i.test(item.file.name);
  if (isSingleGif) {
    return (&lt;ImageGif {...props} /&gt;);
  }

  const isLastOfVisible = index === MAX_SIZE - 1 &amp;&amp; index &gt; 0;
  return (&lt;ImageContainer
    id={index}
    {...props}
    {...isLastOfVisible &amp;&amp; {hiddenImages}}
  /&gt;);
});


Not tested.

Notes:


images.length &lt; 2 was misleading and confusing. The .map callback runs only when there are some elements so 0 is not possible. Simply compare with 1.
images.length &gt;= 2 is superfluous and thus confusing: the previous check ensured this is always the case.
MAX_SIZE === index + 1 this yoda style obfuscates the actual goal, which is to determine whether the element is the last in the range.
MAX_SIZE !== index + 1 is superfluous and thus confusing: the previous check ensured this is always the case.
/.(gif)$/i incorrectly allowed any character before gif. The dot should be escaped. Also, no need for the slower .match if you don't use the captured strings. Use .test