react arrayMap utils

import React from 'react';export function reactMap(arr, ifFn, elseFn) {  if (!arr || !Array.isArray(arr) || arr.length === 0) {    if (elseFn) {      if (typeof elseFn === 'function') return elseFn();      else return elseFn;    } else return false;  } else {    if (ifFn) {      if (typeof ifFn === 'function') {        return React.Children.toArray(arr.map(ifFn));      } else return React.Children.toArray(arr.map(() => ifFn));    } else if (elseFn) return false;    else return true;  }}export function arrMap(arr, ifFn, elseFn) {  if (!arr || !Array.isArray(arr) || arr.length === 0) {    if (elseFn) {      if (typeof elseFn === 'function') {        const result = elseFn();        if (result && Array.isArray(result)) return result;      } else {        if (elseFn && Array.isArray(elseFn)) return elseFn;      }    }  } else {    if (ifFn) {      if (typeof ifFn === 'function') {        return arr.reduce((acc, item, i) => {          const value = ifFn(item, i, arr);          if (value === false || value === undefined) return acc;          else return [...acc, value];        }, []);      } else return arr.map(() => ifFn);    } else if (!elseFn) return arr;  }  return [];}

import { reactMap } from 'utils/reactMapUtils';const arr = [1,2,3,4,5];//you can replace the lines 4 to 9 with only one line, which is line 11. {arr && Array.isArray(arr) && arr.map(val=>    <div key={val}>{val}</div>)}{arr && Array.isArray(arr) && arr.length===0 &&    <div>No data to show</div>}// --------------------------------------------------------------------------------------{reactMap(arr, val => <div>{val}</div>, <div>No data to show</div>)}//by using the above structure, we have the advantages that are listed below. //1. No more null check is required.//2. We don't have to pass the key prop anymore.//3. We don't have to to write array empty condition seperatly anymore too.// Also, the lines 17 to 19 can be written as line 22{arr && Array.isArray(arr) && arr.length!==0 &&    <div>arr has content</div>}// ----------------------------------------------------------------------------------------{reactMap(arr) && <div>arr has content</div>}//Below are the advantages of the structure on the line 22 //1. No more null checks needed anymore.//3. Don't have to check whether the arr contains data or no.