1
resposta

Reutilizando o Transactions com IF

import { Accounts } from "../Accounts";
import { TransactionItem } from "../TransactionItem/Index";
import styles from "./transactions.module.css";

export const Transactions = ({ container }) => {
const dados = {
transacoes: [
{
description: "iFood",
value: -20,
date: "2024-10-01T00:00:00-03:00",
},
{
description: "Papelaria Mila",
value: -80,
date: "2024-10-03T00:00:00-03:00",
},
{
description: "Freela (2ª parte)",
value: 1000,
date: "2024-10-03T00:00:00-03:00",
},
{
description: "Magazine Luiza",
value: -300,
date: "2024-10-05T00:00:00-03:00",
},
],
contas: [
{ bank: "Anybank", balance: 1200 },
{ bank: "Bytebank", balance: 800 },
{ bank: "Switch Bank", balance: 1800 },
],
};

if (container == 1) {
return (
<>


  • {dados.transacoes.map((transactionItem, index) => {
    return (



  • );
    })}

</>
);
} else if (container == 2) {
return (
<>

  • {dados.contas.map((accounts, index) => {
    return (



  • );
    })}

</>
);
}
};
1 resposta

Olá, Patricia, tudo bem?

Muito legal a sua abordagem! Você utilizou a renderização condicional com if/else para reaproveitar o mesmo componente Transactions e exibir conteúdos diferentes baseados na prop container. Essa é uma lógica de programação muito importante no React.

Continue explorando e testando essas lógicas!

Bons estudos!

Sucesso

Imagem da comunidade