Instruções

Passo 20

Antes da instrução return dentro da chamada filteredItems.map(), crie uma variável chamada isChecked e use o método includes() para verificar se o item atual está no array selectedItems. Então, adicione uma prop style ao elemento li e use um operador ternário para definir a propriedade textDecoration como line-through se isChecked for verdadeiro ou none se for falso. Lembre-se de que você precisa envolver o operador ternário em chaves já que é uma expressão JavaScript. Por exemplo, aqui está como você pode usar um operador ternário para definir condicionalmente a cor de um parágrafo em um componente simples:
const MyComponent = () => {
  const isActive = true;

  return (
    <p style={{ color: isActive ? "green" : "black"}}>This text is conditionally styled.</p>
  );
};

O que fazer:

Testes:

  • Você deve criar uma variável chamada `isChecked` que usa o método `includes()` no array `selectedItems` para verificar se o `item` atual está no array.
  • Você deve adicionar uma prop `style` ao elemento `li`.
  • Sua prop `style` deve incluir um operador ternário que define a propriedade `textDecoration` como `line-through` se `isChecked` for true ou `none` se for false.

Preview