Pasando Props
Parte de la sección Fundamentos del Journey de React de Coddy — lección 17 de 42.
Conectemos una prop de extremo a extremo. Tres pasos, siempre los mismos:
// 1. recíbelo
function Greeting({ name }) {
// 2. úsalo
return <p>Hello, {name}!</p>;
}
// 3. pásalo
<Greeting name="Ada" />Las cadenas de texto se pasan entre comillas. Los números y las expresiones usan llaves, la misma regla que los atributos:
<Score points={97} />
Desafío
PrincipianteEl componente Greeting ignora todo lo que le pases.
- Haz que
Greetingreciba una propnamey rendericeHello, {name}!en su párrafo. - En App, pasa
name="Ada"para que la página muestreHello, Ada!.
Pruébalo tú mismo
<!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>
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Fundamentos
1Conoce React
¿Qué es React?Tu primer componenteRegla del padre únicoJSX no es HTMLRecapitulación: Conoce React2Expresiones JSX
LlavesMatemáticas dentro de las llavesLlaves en atributosLlamada a funciones en JSXRecapitulación: Expresiones JSX5Estado y Eventos
¿Qué es el estado?Contador de clicsContar en pasosAlternar con estadoEstado independienteRecapitulación: Estado y eventos8Proyecto: Tarjeta de perfil
Paso 1: Estructura de la tarjetaPaso 2: Tarjeta con PropsPaso 3: Botón de Me gustaPaso 4: Alternador de Seguir