React Props (propiedades)

Las propiedades son la forma que tiene React para pasar parámetros de un componente padre a los hijos. Es normal que un componente pase datos a los componentes hijos, sin embargo, no es lo único que se puede pasar, si no que existe ocasiones en las que los padres mandar funciones a los hijos, para que estos ejecuten operaciones de los padres, puede sonar extraño, pero ya veremos cómo funciona.

Los props se envían a los componentes al momento de crearlos, y es tan fácil como mandar las propiedades como un atributo del <tag> del componente, por ejemplo, si observamos el componente <ItemList> verás que le mandamos una propiedad product, la cual contenía un nombre y un precio:

1<ItemList product={ {name: 'Product 1', price: 200} }/>

Mandar objetos es una forma simple y limpia de mandar propiedades, pero también lo podríamos hacer en varias propiedades, por ejemplo:

1<ItemList productName={ 'Product 1' } productPrice={ 200 }/>

La única diferencia entre estos dos métodos será la forma de recuperar las propiedades. Ya que para recuperar una propiedad es necesario usar el prefijo, this.props, por lo que en el primer ejemplo, el producto se recupera como this.props.product, y en el segundo ejemplo, sería this.props.productName para el nombre y this.props.productPrice para el precio.

Las propiedades son inmutables

La propiedad tiene la característica de ser inmutables, es decir, no debemos de modificarlas o actualizarlas, pues es considerada una mala práctica, solo las debemos utilizar de modo lectura.

Regresemos al ejemplo del formulario de la sección componentes con estado y sin estado. En este ejemplo, creamos el componente App y sobre este montamos un formulario de registro de empleados. Ahora bien, ¿qué pasaría si quisiéramos que la acción de guardar la controlara el componente padre? La solución es simple, el componente padre tendría que enviar como props la función de guardar, para que el hijo la ejecute. Veamos cómo quedaría esto:

Lo primero será pasar el formulario a un componente externo, por lo cual, crearemos un nuevo componente llamado EmployeeForm, el cual se verá como a continuación:

1import React from 'react'
2import Image from 'next/image'
3
4class EmployeeForm extends React.Component{
5
6    constructor(){
7    super(...arguments)
8    this.state = {
9        firstName: "",
10        lastName: "",
11        age: ""
12    }
13    }
14
15    handleChanges(e){
16    let newState = Object.assign(this.state,
17        {[e.target.id]: e.target.value})
18    this.setState(newState)
19    }
20
21    saveEmployee(e){
22        this.props.save(this.state)
23    }
24
25    render(){
26        return (
27            <form>
28                <label htmlFor='firstName'>Nombre</label>
29                <input id='firstName' type='text' value={this.state.firstName} onChange={this.handleChanges.bind(this)}/>
30                <br />
31                <label htmlFor='lastName'>Apellido</label>
32                <input id='lastName' type='text' value={this.state.lastName} onChange={this.handleChanges.bind(this)}/>
33                <br />
34                <label htmlFor='age'>Edad</label>
35                <input id='age' type='number' value={this.state.age} onChange={this.handleChanges.bind(this)}/>
36                <br />
37                <button onClick={this.saveEmployee.bind(this)}>Guardar</button>
38            </form>
39        )
40    }
41}
42export default EmployeeForm

Este componente es casi idéntico al primer formulario que creamos, pero hemos agregado dos cosas, lo primero es que en la línea 39 agregamos un botón, el cual, al ser presionado, ejecutar la función saveEmployee declarada en este mismo componente, el segundo cambios, la función saveEmployee que declaramos en la línea 20, el cual lo único que hace es ejecutar la función save enviada por el parent como prop.

Por otra parte, tenemos al componente App que será el padre del componente anterior:

1import React from 'react'
2import Image from 'next/image'
3import {render} from 'react-dom'
4import EmployeeForm from './EmployeeForm'
5
6class App extends React.Component{
7
8    save(employee){
9    alert(JSON.stringify(employee))
10    }
11
12    render(){
13    return (
14        <EmployeeForm save={this.save.bind(this)} />
15    )
16    }
17}
18render(<App />, document.getElementById('root'));

Podemos ver que al momento de crear el componente EmployeeForm, este le envía como una prop la función save. De esta forma, cuando el componente EmployeeForm, ejecute la propiedad, se lanzará una alerta con los datos capturados (línea 8).

Binding functions

Cuando es necesario “bindear” una función con una prop o queremos utilizar una función en un evento como onClick, onChange, etc. es necesario siempre empezar con this, y finalizar con binding(this) como se ve a continuación this.<function>.bind(this).

React Props (propiedades)

Acerca de este libro