Curso de React | Usar Props en React 1

Curso de React
Usar Props en React

Curso de React | Usar Props en React 2

Sintácticamente una prop es similar a los atributos de HTML. Sirve para transferir información de un componente a otro.

./src/App.js

import Hello from './components/Hello';

const App =() => <Hello title="hola pepito"/>;

export default App;

./src/components/Hello.js

const Hello = (props) => <h2>{props.title}</h2>;

export default Hello;

children

import Box from './components/Box';

const App = () => (
  <div>
    <Box>Texto 1</Box>
    <Box>Texto 2</Box>
  </div>
)

export default App;

const Box = (props) => (
  <div>
    {props.children}
  </div>;
)
export default Box;
Ver ejemplo
Descargar código fuente

Destructuring del props

const App = () => <Prueba prop1={3} prop2={4} />;

const Prueba = ({prop1, prop2}) => <div>
    {/* gracias al destructuring no tengo que usar this.props.prop1 para imprimir la propiedad prop1  */}  
    <p>{prop1}</p>
    <p>{prop2}</p>
  </div>;

Error en el linting de Vite con las props

Utilizando Vite y props, podemos ver el siguiente mensaje de error:

'propName' is missing in props validationeslintreact/prop-types

El mensaje nos indica que nos falta validar la prop. Para solventarlo, tenemos dos opciones.

  • Validar la prop.
import PropTypes from 'prop-types';

const MyComponent = ({ name }) => {
    return (
        <div>Cooo {name}</div>
    )
}

MyComponent.propTypes = {
    name: PropTypes.string,
};
export default MyComponent
  • Desactivar la validación de props en el .eslintrc.cjs
rules: {
  "react/prop-types": "off"
}

Ejercicios props

1. Ejercicio props

En este ejercicio, crearemos un componente y lo importaremos en el componente principal App.

1. Crear el archivo Book.jsx en la carpeta ./src/components.

Descargar código fuente
Ver ejercicio resuelto

2. Después copia este código y complétalo para que devuelva el texto “Viaje a la luna”:

const Book = () =>(
   // Aquí falta código
) 
export default Book;

Ahora haremos uso del componente Book dentro App.jsx:

import Book from './components/Book';
const App = () => {
    return (
        <div>
           <Book/>
        </div>
    );
};
export default App;

El resultado debe ser:

Curso de React | Usar Props en React 3

3. En lugar de harcodear (escribir directamente) el valor del componente en su interior, vamos a pasarselo como prop desde el componente App. Para ello, borraremos la frase Viaje a la luna de Book.jsx y la recuperaremos como prop desde el componente App.

El resultado debería seguir siendo el mismo. Lo único que cambiará será la implementación del código.

En el componente App, usaremos este código:

<Book bookData="Viaje a la luna" />

4. Vamos a leer los libros que mostrará nuestra aplicación desde un fichero JSON. Para ello, importaremos dicho fichero en nuestra aplicación y lo recorreremos con una estructura .map.

Este es el JSON con el array de libros:

./src/data/books.json

[
  {
    "title": "Viaje a la luna",
    "author": "Julio Verne"
  },
  {
    "title": "El médico",
    "author": "Noah Gordon"
  }
]

Para importarlo, usaremos:

./src/App.js

import books from './data/books.json';
import Book from './components/Book';

const App = () => {
  return (
    <>
        {books.map( b=> <Book bookData={b} />)}
    </>
  )
}

export default App

El resultado final sería algo así:

Curso de React | Usar Props en React 4

Interpretar el HTML de una prop

Lo que sigue es la única forma que tenemos en React de pasarle código HTML a un componente para que lo interprete y muestre el resultado.

export default () => <Prueba rawHtml={"<strong>hola</strong>"} />;

const Prueba = ({rawHtml}) => <div>
  <div dangerouslySetInnerHTML={{__html: rawHtml}}/>
  {/*El siguiente código no funcionaría*/}
  <div>{rawHtml}</div>
</div>;

Pasar una prop del hijo al padre 

App.js
const App = () => {

const changePadre = param =>  alert(param);

return <div>
    <MyComponent onSomeEvent={changePadre} />
  </div>;
}

export default App;
MyComponent.js
const MyComponent = ({onSomeEvent}) => (
   <button onClick={() => onSomeEvent(3)}>Pulame</button>;
)
export default MyComponent;
Descargar código
Curso de React | Usar Props en React 5

Ejercicios

1. Del hijo al padre y del padre al hijo

Programa una aplicación con dos componentes. En uno de ellos, el usuario escribirá dos números y calculará su producto al pulsar el botón de calcular. Ese componente, enviará el resultado de la operación al componente padre que a su vez se la enviará al segundo componente que será el encargado de mostrar la solución.

Descargar Recurso
Curso de React | Usar Props en React 6

2. Desarrollar el siguiente componente:

Curso de React | Usar Props en React 7

Al pulsar el botón de sumar, aumentará una unidad el value que hay en el input del componente, y al pulsar el botón de restar, disminuirá.

Cuando termines este componente, tendrás que hacer que el valor del input sea recogido y mostrado en el componente App:

Curso de React | Usar Props en React 8

Si modificamos directamente el valor del input, el valor recogido en App también debe cambiar.

Los botones de suma y de resta le pasarán el valor actualizado al componente App, que actualizará un estado y le pasará el valor actualizado de vuelta al componente, que tendrá un aspecto similar a este:

Descargar Recurso 
<Component sendValue={setValue} value={value} />
Ver ejercicio resuelto

3. Lista de tareas

Haremos una aplicación de lista de tareas. Cada tarea será un componente. El componente de tarea podrá recibir una prop de App para pintar el texto de la tarea y también podremos, al pulsar el botón de borrar del componente Tarea, comunicarnos con el componente App para eliminar la tarea del array.