Error while trying to render ternary conditional operator component in REACT

Question

This is my component

      {portaisAtuais
        .filter(portal => !portais.includes(portal.id))
        .map((portal, index) => {
          const { nome, id } = portal
          portaisAtuais.length === index + 1 ? ( 
            <div ref={ultimoPortal}>
              <GroupItem id={id} onClick={adicionarPortal} key={id}>
                {++index}- {nome}
                <Plus size="13" style={{ color: '#8BBA3F' }} />
              </GroupItem>
            </div>
          ) : (
            <GroupItem id={id} onClick={adicionarPortal}>
              {++index}- {nome}
              <Plus size="13" style={{ color: '#8BBA3F' }} />
            </GroupItem>
          )
        })}

I’m having trouble rendering according to the ternaries of that mistake:

Expected an assignment or function call and instead saw an expression  no-unused-expressions

I made it work with if/Else, but I need to use the ternary conditional operator ? :

Answer 1

Opa João, good morning!

Are you forgetting to return something from .map. Your code should stay that way:

{portaisAtuais
    .filter(portal => !portais.includes(portal.id))
    .map((portal, index) => {
      const { nome, id } = portal
      return portaisAtuais.length === index + 1 ? ( 
        <div ref={ultimoPortal}>
          <GroupItem id={id} onClick={adicionarPortal} key={id}>
            {++index}- {nome}
            <Plus size="13" style={{ color: '#8BBA3F' }} />
          </GroupItem>
        </div>
      ) : (
        <GroupItem id={id} onClick={adicionarPortal}>
          {++index}- {nome}
          <Plus size="13" style={{ color: '#8BBA3F' }} />
        </GroupItem>
      )
    })}