React 19
Ejercicios de React sobre Props
6 ejercicios de Props en React. Piensa la respuesta antes de abrirla: la explicación dice por qué las demás opciones fallan.
1 · Elige la respuesta · nivel 1
¿Qué pasa si un componente hace props.title = "otro"?
- ANo se debe: las props son de solo lectura y en desarrollo lanza un error
- BCambia también el título en el componente padre
- CEl componente se vuelve a renderizar con el título nuevo
- DNada, y es la forma recomendada de cambiarlas
Ver la respuesta
Respuesta: A. No se debe: las props son de solo lectura y en desarrollo lanza un error
Un componente nunca modifica sus props: las controla el padre. En desarrollo, React congela el objeto props y la asignación lanza un TypeError. Si el valor tiene que cambiar, es estado.
2 · Elige la respuesta · nivel 1
¿Qué recibe Card en children?
function Card({ children }) { return <div className="card">{children}</div>;} <Card><p>Hola</p></Card>- AEl <p>Hola</p> que va entre las etiquetas
- BUn array vacío
- CEl texto "children"
- Dundefined: hay que pasarlo como prop explícita
Ver la respuesta
Respuesta: A. El <p>Hola</p> que va entre las etiquetas
Lo que va entre la etiqueta de apertura y la de cierre llega en la prop children. Es la forma de crear contenedores reutilizables como tarjetas o modales.
3 · Elige la respuesta · nivel 1
¿Qué muestra <Greeting name="Raúl" />?
function Greeting({ name }) { return <p>Hola, {name}</p>;}- AHola, Raúl
- BHola, name
- CHola, undefined
- DHola, {name}
Ver la respuesta
Respuesta: A. Hola, Raúl
Los atributos que pones al usar un componente le llegan como props. Aquí se desestructura name directamente en los parámetros.
4 · Completa el hueco · nivel 1
Completa para mostrar el precio que llega por props.
function Price({ amount }) { return <span>{___} €</span>;}- amount
- props
- this.amount
- "amount"
Ver la respuesta
Respuesta: amount
function Price({ amount }) { return <span>{amount} €</span>;}Al desestructurar { amount } en los parámetros, amount ya es una variable. this solo existía en los componentes de clase.
5 · Ordena las líneas · nivel 1
Ordena un componente Avatar con tamaño por defecto y, después, un Profile que lo use.
- return <img src={src} width={size} height={size} alt="" />;
- }
- export const Profile = () => <Avatar src="/ana.png" />;
- function Avatar({ src, size = 48 }) {
- function Avatar(src, size = 48) {
Ver la respuesta
El orden correcto:
function Avatar({ src, size = 48 }) { return <img src={src} width={size} height={size} alt="" />;}export const Profile = () => <Avatar src="/ana.png" />;Sobran: function Avatar(src, size = 48) {
Un componente recibe un único objeto props, que se desestructura entre llaves. Ahí se ponen los valores por defecto. Escribir (src, size) recibiría el objeto entero en src.
6 · Ordena las líneas · nivel 1
Ordena el código: primero el componente Badge y después App, que lo usa con el texto "Nuevo".
- return <Badge text="Nuevo" />;
- }
- const Badge = ({ text }) => <span>{text}</span>;
- function App() {
Ver la respuesta
El orden correcto:
const Badge = ({ text }) => <span>{text}</span>;function App() { return <Badge text="Nuevo" />;}Badge recibe text como prop y lo muestra. App lo usa como una etiqueta más, pasándole el valor como atributo.