Cursos de páginas web

Curso de React | Usar Props en React

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

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 comnponente 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 1

3. En lugar de harcodear (escribir directamente) el valor del componente en su interior, vamos a pasarselo 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 Appi, usaremos este código:

<Book book="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 (
    <>
        {// <Book/> es un componente, b es el objeto sobre el que estas iterando y book es una prop }
        {books.map( b=> <Book book={b} />)}
    </>
  )
}

export default App

El resultado final sería algo así:

Curso de React | Usar Props en React 2

Default props

En caso de que la prop no reciba ningún valor, el default prop será su valor por defecto

const Prueba = (props) => (
  <div>{props.title}</div> 
);

Prueba.defaultProps = {
  title: 'Amor'
}

const App = () => (
  <Prueba />
);

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

Ejercicio

1. 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 3

2. Desarrollar el siguiente componente:

Curso de React | Usar Props en React 4

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 5

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

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.