Operador lógico &&

[vanderleipinto]

Operador lógico &&

Usado para mostrar condicionalmente itens. Exemplo: {author && <p> Author: {author} </p> } // significa que se tiver author, ele vai mostrar a tag

senão ele não mostra. OBS: Ele só retorna um elemento, se tiver mais de um elemento, ele deve ser envolvido dentro de um fragment.

Serve também para negativa. {!author &&

Author desconhecido

} //

[vanderleipinto]

Aqui no card mostraremos a

com os dados somente se author existir.

import { ReactNode } from "react";

type Props = {
  phrase: string;
  author?: string;
}

export const Card = ({ phrase, author }:Props) => {

  return (
    <div className="w-96 border-2 border-red-600 p-3 text-3xl text-center italic">
        <h3 className="text-3xl font-bold italic">"{phrase}"</h3>
        {author && 
          <p className="text-right text-sm">{author}</p>
        }
        {!author && 
          <p className="text-right text-sm italic">Autor desconhecido</p>
        }
    </div>
  )
}