在反应中返回array.map函数中的值

Question

Using React JSX, I have an array levels which can contain arrays of one or more of the levels with a name, for example: one , two and three . In my render function I can call {renderLevels} which renders all levels separated by a comma.

This works:

const renderLevels = levels.map((item, index) => {
      return (
         <Fragment key={index}>
            {(index ? ' & ' : '')} {item.name}
         </Fragment>
      )
   }
);

In case all levels are present I want to render 'all levels', instead of the comma separated list. In all other cases I want the list. So I change my code.

This does not work:

const renderLevels = () => {

   if (levels.length === 3) {
      return (
         'all levels'
      )
   }

   levels.map((item, index) => {
         return (
            <Fragment key={index}>
               {(index ? ' & ' : '')} {item.name}
            </Fragment>
         )
      }
   )
};

My const is now a function I then call with {renderLevels()} . The problem: the list of item names is no longer returned when there are fewer than 3 levels. My if-statement works and console.log(item.name) inside .map does show me the results in case there are fewer than 3 levels. Getting the return values however does not. What am I doing wrong?

Answer 1

You are missing return for the levels.map() . Currently, you are just returning for the function, inside the if block but you have not returned anything when that if is not executed.

const renderLevels = () => {

   if (levels.length === 3) {
      return (
         'all levels'
      )
   }

   return levels.map((item, index) => {
         return (
            <Fragment key={index}>
               {(index ? ' & ' : '')} {item.name}
            </Fragment>
         )
      }
   )
};