如果 Map 内部的条件 // React JS

Question

I'm working on a Breadcrumb component in React JS that returns Links. When binding the component inside my header I give it an array of items (label for the link, URL and a class for 'active' or 'inactive').

Now, inside the mapping of this data I would like to check whether or not the class is 'inactive', and if that is the case I want to set the 'to' link (to={to}) to an empty string. I have unsuccessfully tried using an if condition around the ≤Link≥ component, does anyone know if this is possible and what the correct syntax is?

const items = [
    {to: '/link1', label: 'Step 1', stepClass: 'active'},
    {to: '/link2', label: 'Step 2', stepClass: 'inactive'},
];

<Breadcrumb>
      {items.map(({to, label, stepClass}) => (
        <Link key={to} to={to}>
          <div className={`step ${stepClass}`}>{label}</div>
        </Link>
      ))}
 </Breadcrumb>

Answer 1

Maybe something like

const items = [
    {to: '/link1', label: 'Step 1', stepClass: 'active'},
    {to: '/link2', label: 'Step 2', stepClass: 'inactive'},
];

<Breadcrumb>
      {items.map(item => (
        <Link key={item.to} to={item.stepClass == active ? item.to : ''}>
          <div className={`step ${item.stepClass}`}>{label}</div>
        </Link>
      ))}
 </Breadcrumb>

Answer 2

You can also use if-else block like this in react and return jsx from if-else block.

const items = [
    {to: '/link1', label: 'Step 1', stepClass: 'active'},
    {to: '/link2', label: 'Step 2', stepClass: 'inactive'},
];

<Breadcrumb>
      {items.map(({to, label, stepClass}) => {
        if(stepClass === "inactive")
         {
            return (
                    <Link key={to} to={to}>
                        <div className={`step ${stepClass}`}>{label}</div>
                    </Link> 
                 );
         }
         else 
         {
              return (

                // code here
              );
          }

      })}
 </Breadcrumb>