Mesmo Componente, Novos Dados
Parte da seção Fundamentos do Journey de React da Coddy — lição 19 de 42.
Junte reuso e props e você terá o padrão real: um componente, renderizado muitas vezes com dados diferentes.
function Badge({ label }) {
return <span>{label}</span>;
}
<Badge label="New" />
<Badge label="Sale" />
<Badge label="Hot" />Três badges, três labels, uma definição. Toda lista, menu, feed e galeria que você já viu na web é este padrão (mais tarde, inclusive, geraremos as cópias a partir de um array).
Desafio
FácilEnvie os badges promocionais da loja.
- Faça o
Badgereceber uma proplabele renderizá-la dentro do seu<span>. - Dentro de
<div id="badges">renderize dois badges: o primeiro com a labelNew, e o segundo com a labelSale.
Experimente você mesmo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Fundamentos
1Conheça o React
O que é o React?Seu primeiro componenteRegra do elemento pai únicoJSX não é HTMLRecapitulação: Conheça o React4Props
O Que São Props?Passando PropsDuas PropsMesmo Componente, Novos DadosA Prop ChildrenRecapitulando: Props